feat: introduce WithDragAndDropUpload component #2688
Merged
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
feat/with-drag-and-drop-upload
branch
from
c002f7d to
cf5d938
Compare
|
Size Change: +2.1 kB (+0.15%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
arnautov-anton
force-pushed
the
feat/with-drag-and-drop-upload
branch
from
cf5d938 to
f62741f
Compare
arnautov-anton
changed the title
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #2688 +/- ##
==========================================
- Coverage 81.02% 80.98% -0.04%
==========================================
Files 470 471 +1
Lines 9956 9984 +28
Branches 2414 2360 -54
==========================================
+ Hits 8067 8086 +19
- Misses 1508 1775 +267
+ Partials 381 123 -258 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
MartinCupela
approved these changes
Apr 24, 2025
oliverlaz
approved these changes
Apr 24, 2025
arnautov-anton
added a commit
to GetStream/stream-chat-css
that referenced
this pull request
Apr 24, 2025
### 🎯 Goal Ref: GetStream/stream-chat-react#2688 Notable Changes: - renamed `DragAmdDropContainer-layout` to `DragAndDropContainer-layout`
Merged
MartinCupela
added a commit
that referenced
this pull request
Apr 28, 2025
### 🎯 Goal Provide a message composition API supported by reactive state layer from stream-chat. The message composition logic has been moved to stream-chat. The logic kept in stream-chat-react is related only to the browser event handling. Depends on: - GetStream/stream-chat-js#1495 - GetStream/stream-chat-css#328 ### 🛠 Implementation details The message composition now relies on `MessageComposer `instance. The instance is available for the channel message list, thread message list and for editing a specific message. The `MessageComposer` instance should be accessed via `useMessageComposer` hook, that identifies the correct context (channel, thread, message). ### 🎨 UI Changes No changes BREAKING CHANGE: `Channel` props `dragAndDropWindow` & `optionalMessageInputProps` have been removed, use `WithDragAndDropUpload` component instead (#2688) BREAKING CHANGE: Attachment identity functions moved to stream-chat-js (e.g. isFileAttachment...) BREAKING CHANGE: Remove ChatAutoComplete, AutoCompleteTextarea, DefaultSuggestionList, DefaultSuggestionListItem and introduce TextareaComposer, SuggestionList, SuggestionListItem BREAKING CHANGE: Remove defaultScrollToItem function previously used by SuggestionList BREAKING CHANGE: Removed DefaultTriggerProvider component BREAKING CHANGE: Remove from Channel props - acceptedFiles, enrichURLForPreview, enrichURLForPreviewConfig, maxNumberOfFiles, multipleUploads, TriggerProvider BREAKING CHANGE: Removal of acceptedFiles, debounceURLEnrichmentMs, enrichURLForPreview, findURLFn, multipleUploads, onLinkPreviewDismissed, quotedMessage from ChannelStateContext BREAKING CHANGE: Changed signature for functions sendMessage and editMessage in ChannelActionContext BREAKING CHANGE: Changed signature for handleSubmit BREAKING CHANGE: Removed setQuotedMessage from ChannelActionContext BREAKING CHANGE: Removed types MessageToSend, StreamMessage, UpdatedMessage in favor of LocalMessage or RenderedMessage BREAKING CHANGE: Removed Trigger generics from ChannelProps BREAKING CHANGE: Message input state as well as the API is now kept within MessageComposer instead of MessageInputContext BREAKING CHANGE: Renamed useMessageInputState to useMessageInputControls as it does not handle the composition state anymore BREAKING CHANGE: Removed from MessageInputProps - disabled, disableMentions, doFileUploadRequest, doImageUploadRequest, errorHandler, getDefaultValue, mentionAllAppUsers, mentionQueryParams, message, noFiles, urlEnrichmentConfig, useMentionsTransliteration, additionalTextareaProps do not expect default value anymore BREAKING CHANGE: Changed the signature of MessageInput prop overrideSubmitHandler BREAKING CHANGE: Local attachment and link preview types moved to stream-chat BREAKING CHANGE: The SuggestionListItem UI components for TextareaComposer receive tokenizedDisplayName instead of itemNameParts BREAKING CHANGE: Removed duplicate types SendMessageOptions, UpdateMessageOptions which should be imported from stream-chat instead BREAKING CHANGE: Removed type LinkPreviewListProps - LinkPreviewList does not have any props anymore --------- Co-authored-by: Anton Arnautov <[email protected]>
github-actions bot
pushed a commit
that referenced
this pull request
Apr 28, 2025
## [13.0.0-rc.1](v12.14.0...v13.0.0-rc.1) (2025-04-28) ### ⚠ BREAKING CHANGES * `Channel` props `dragAndDropWindow` & `optionalMessageInputProps` have been removed, use * Remove ChatAutoComplete, AutoCompleteTextarea, DefaultSuggestionList, DefaultSuggestionListItem and introduce TextareaComposer, SuggestionList, SuggestionListItem * Remove defaultScrollToItem function previously used by SuggestionList * Removed DefaultTriggerProvider component * Remove from Channel props - acceptedFiles, enrichURLForPreview, enrichURLForPreviewConfig, maxNumberOfFiles, multipleUploads, TriggerProvider * Removal of acceptedFiles, debounceURLEnrichmentMs, enrichURLForPreview, findURLFn, multipleUploads, onLinkPreviewDismissed, quotedMessage from ChannelStateContext * Changed signature for functions sendMessage and editMessage in ChannelActionContext * Changed signature for handleSubmit * Removed setQuotedMessage from ChannelActionContext * Removed types MessageToSend, StreamMessage, UpdatedMessage in favor of LocalMessage or RenderedMessage * Removed Trigger generics from ChannelProps * Message input state as well as the API is now kept within MessageComposer instead of MessageInputContext * Renamed useMessageInputState to useMessageInputControls as it does not handle the composition state anymore * Removed from MessageInputProps - disabled, disableMentions, doFileUploadRequest, doImageUploadRequest, errorHandler, getDefaultValue, mentionAllAppUsers, mentionQueryParams, message, noFiles, urlEnrichmentConfig, useMentionsTransliteration, additionalTextareaProps do not expect default value anymore * Changed the signature of MessageInput prop overrideSubmitHandler * Local attachment and link preview types moved to stream-chat * The SuggestionListItem UI components for TextareaComposer receive tokenizedDisplayName instead of itemNameParts * Removed duplicate types SendMessageOptions, UpdateMessageOptions which should be imported from stream-chat instead * Removed type LinkPreviewListProps - LinkPreviewList does not have any props anymore * dropped `StreamChatGenerics`, use `Custom<Entity>Data` to extend your types ### Bug Fixes * replace StreamChatGenerics with module augmentation ([#2634](#2634)) ([67bed79](67bed79)) ### Features * default data interfaces ([#2683](#2683)) ([a88e145](a88e145)) * introduce WithDragAndDropUpload component ([#2688](#2688)) ([6b03abd](6b03abd)) * message composer ([#2669](#2669)) ([fa2519b](fa2519b)), closes [#2688](#2688) ### Chores * **deps:** upgrade @stream-io/stream-chat-css to v5.8.1 ([#2689](#2689)) ([d0c32e3](d0c32e3)) ### Refactors * simplify WithDragAndDropUpload API ([#2691](#2691)) ([46c9add](46c9add))
|
🎉 This PR is included in version 13.0.0-rc.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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
Current
Channel.dragAndDropWindowandChannel.optionalMessageInputPropsarchitecture which used to allow drag&drop file upload by dropping files onto the message list (channel) component suffers from a few pain points:MessageInputContextProviderinitialization, see here, here and here (related issue)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
MessageInputFlatcomponent (some minor adjustments from integrators are needed - such as setting relative positioning on required parents).Old API:
New API:
Deprecations
Public
Channel.dragAndDropWindowprop (will remove in v13)Channel.optionalMessageInputPropsprop (will remove in v13)Private
DropzoneProviderDropzoneInnerImageDropzoneNote: 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
🎨 UI Changes
Before:
After: