feat: implement message bounce flow #2254
Merged
Conversation
This file contains 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
myandrienko
commented
Jan 31, 2024
| if (allowRetry) { | ||
| handleClick = () => handleRetry(message); | ||
| } else if (isBounced) { | ||
| handleClick = () => setIsBounceDialogOpen(true); |
There was a problem hiding this comment.
When a message is bounced, clicking on it should open a modal.
Comment on lines
17
to
21
| <Modal {...modalProps}> | ||
| <MessageBounceProvider> | ||
| <MessageBounceOptions onClose={modalProps.onClose} /> | ||
| </MessageBounceProvider> | ||
| </Modal> |
There was a problem hiding this comment.
The modal renders MessageBounceOptions (which can be overriden to customize the contents of the modal), and provides a couple of callbacks to it via context.
|
|
||
| const handleEdit: ReactEventHandler = useCallback( | ||
| (e) => { | ||
| setEditingState(e); |
There was a problem hiding this comment.
Clicking the "Edit" button switches the message to editing mode.
| @@ -189,7 +189,7 @@ export const useSubmitHandler = < | |||
| ((!someLinkPreviewsLoading && attachmentsFromLinkPreviews.length > 0) || | |||
| someLinkPreviewsDismissed); | |||
| const sendOptions = linkPreviewsEnabled ? { skip_enrich_url } : undefined; | |||
| if (message) { | |||
| if (message && message.type !== 'error') { | |||
There was a problem hiding this comment.
Since bounced messages are ephemeral (as are all messages with type "error"), when editing them MessageInput should just send a new message instead of updating an existing one - this check handles that.
There was a problem hiding this comment.
Can you add test for this one please?
myandrienko
force-pushed
the
feat/message-bounce
branch
from
9d2a1bc
to
59a9eb3
Compare
|
Size Change: +9.95 kB (+1%) Total Size: 1.72 MB
ℹ️ View Unchanged
|
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## master #2254 +/- ##
==========================================
+ Coverage 84.67% 84.88% +0.21%
==========================================
Files 328 343 +15
Lines 7458 7595 +137
Branches 1985 1996 +11
==========================================
+ Hits 6315 6447 +132
- Misses 969 974 +5
Partials 174 174 ☔ View full report in Codecov by Sentry. |
myandrienko
requested review from
MartinCupela,
khushal87,
oliverlaz,
arnautov-anton and
szuperaz
and removed request for
MartinCupela
MartinCupela
reviewed
Feb 8, 2024
docusaurus/docs/React/components/contexts/message-bounce-context.mdx
Outdated
Show resolved
Hide resolved
MartinCupela
reviewed
Feb 8, 2024
docusaurus/docs/React/components/message-components/ui-components.mdx
Outdated
Show resolved
Hide resolved
MartinCupela
reviewed
Feb 8, 2024
docusaurus/docs/React/components/message-components/ui-components.mdx
Outdated
Show resolved
Hide resolved
MartinCupela
reviewed
Feb 8, 2024
MartinCupela
reviewed
Feb 8, 2024
MartinCupela
reviewed
Feb 8, 2024
MartinCupela
approved these changes
Feb 9, 2024
oliverlaz
approved these changes
Feb 9, 2024
github-actions bot
pushed a commit
that referenced
this pull request
Feb 13, 2024
## [11.8.0](v11.7.0...v11.8.0) (2024-02-13) ### Bug Fixes * adjust the first message rendering for DateSeparator in empty VirtualizedMessageList ([#2271](#2271)) ([8f490fa](8f490fa)) * export DefaultStreamChatGenerics ([#2266](#2266)) ([6a928f6](6a928f6)) * prevent mine attr from spreading on message actions box div ([#2270](#2270)) ([1625471](1625471)) * remove mark read functionality from ChannelPreview ([#2273](#2273)) ([3be1ec5](3be1ec5)) ### Features * implement message bounce flow ([#2254](#2254)) ([3878e2f](3878e2f)) * keep unread channel UI when unread channel is marked read on mount ([#2267](#2267)) ([2abe352](2abe352))
|
🎉 This PR is included in version 11.8.0 🎉 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
🚂 GetStream/stream-chat-js#1213
🚂 GetStream/stream-chat-css#264
In chats with moderation rules set up, message can bounce if its content is deemed potentially harmful. The author of a bounced message should then be presented with four alternatives:
🛠 Implementation details
This PR introduces a couple of new components, including the
MessageBounceModalwhich is rendered byMessageSimplewhen a bounced message is clicked.The contents of the modal (
MessageBounceOption) is an overridable component that should ideally render three buttons for the first three alternative options listed above. The callbacks for said buttons are provided viaMessageBounceContext.🎨 UI Changes
The chat in the screenshot has a semantic filter set up which is triggered by the word "midnight". Here's what a bounced message with the word "midnight" looks like:
Clicking on the bounced messages opens
MessageBounceModal:Clicking "Edit Message" opens the standard editing UI:
To-Do and Next Steps
The design doc for this feature also features a notification banner with a button, which is displayed when a message bounces. Clicking the button should bring the user to the bounced message.
We don't have a way to have interactive elements within channel notifications at the moment, but this is going to be implemented in further PRs in two steps:
stream-chat-csswith udpated stylesstream-chat-jswith updates typesMessageBounceModalandMessageBounceOptionswith tests