Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add moderation types #1213

Merged
merged 4 commits into from
Jan 31, 2024
Merged

feat: add moderation types #1213

merged 4 commits into from
Jan 31, 2024

Conversation

myandrienko
Copy link
Contributor

Description of the changes, What, Why and How?

Added new types for moderation responses, and a new optional property moderation_details on MessageResponse.

When the message doesn't pass moderation and is bounced, the response from POST /channels/:type/:id/message endpoint contains moderation_details. The clients may use this field to properly notify users.

The types are based on
https://github.com/GetStream/chat/blob/master/automod/moderation/nnbb.go#L61-L66, since they are not exposed in OpenAPI.

Changelog

  • new optional property moderation_details in MessageResponseBase type

Copy link
Contributor

github-actions bot commented Jan 25, 2024

Size Change: 0 B

Total Size: 332 kB

ℹ️ View Unchanged
Filename Size
dist/browser.es.js 71.5 kB
dist/browser.full-bundle.min.js 44.1 kB
dist/browser.js 72.4 kB
dist/index.es.js 71.5 kB
dist/index.js 72.5 kB

compressed-size-action

@@ -571,6 +572,18 @@ export type MessageResponseBase<
updated_at?: string;
};

export type ModerationDetailsResponse = {
action: 'MESSAGE_RESPONSE_ACTION_BOUNCE' | (string & {});
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a known trick to both get nice autocomplete from TS Language Server, and allow any string value at the same time.

@myandrienko myandrienko enabled auto-merge (squash) January 25, 2024 15:56
@myandrienko myandrienko merged commit 2a13b05 into master Jan 31, 2024
6 checks passed
@myandrienko myandrienko deleted the feat/moderation-types branch January 31, 2024 10:16
This was referenced Feb 1, 2024
myandrienko added a commit to GetStream/stream-chat-react that referenced this pull request Feb 9, 2024
### 🎯 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:

1. Edit the message and try sending it again
2. Try sending it again as-is (this is helpful for "bounce then flag"
flow)
3. Remove the message
4. Do nothing. Bounced messages are ephemeral, so it will soon disappear
on its own

### 🛠 Implementation details

This PR introduces a couple of new components, including the
`MessageBounceModal` which is rendered by `MessageSimple` when 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 via `MessageBounceContext`.

### 🎨 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:


![image](https://github.com/GetStream/stream-chat-react/assets/975978/9476cde6-f310-41a8-bb6d-3e7ed0f58421)

Clicking on the bounced messages opens `MessageBounceModal`:


![image](https://github.com/GetStream/stream-chat-react/assets/975978/9bbb7201-3342-4ce7-88f2-9a3131c96878)

Clicking "Edit Message" opens the standard editing UI:


![image](https://github.com/GetStream/stream-chat-react/assets/975978/ef627801-9b3b-46e5-8d12-eb8b3fd08afd)

### To-Do and Next Steps

[The design
doc](https://www.figma.com/file/ekifwChR9tR7zRJg1QEzSM/Chat-UI-Kit-1.0-All-platforms?type=design&node-id=23638-313355&mode=design)
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:

1. Allow passing arbitrary JSX to the notification, not just text
2. Implement a bounced message notification with a button to bring the
user to the message

- [x] Release `stream-chat-css` with udpated styles
- [x] Release `stream-chat-js` with updates types
- [x] Cover `MessageBounceModal` and `MessageBounceOptions` with tests
- [x] Document new components and customization options
- [x] Document the moderation flow
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants