Feature Announcement: Improve High-Volume Chats with Slow Mode

💡 New frontend SDK support! Slow Mode is now easier to implement, with UI components built into the Android, Flutter, and React Native frontend SDKs and additional SDK support coming soon. With client and UI support for Slow Mode, the Send button is temporarily replaced by a countdown. Once the countdown is over, the button default state is restored. During the cooldown period, the user can still type a message, but can't send it. You can still configure slow mode via the backend chat SDKs as described below.

When utilizing real-time chat for communication during a popular event, it can be beneficial to slow down the conversation by restricting how frequently participants can send messages to avoid missing content that would otherwise get drowned out by noisy or spammy chatters.

This type of feature might provide value during live broadcasts on platforms like YouTube Live when covering popular events such as a rocket launch by SpaceX. Many enthusiastic viewers of the launch will likely be chatting about every possible aspect of the event. Having a high flow of messages in a single channel can often result in a sub-par user experience for any given individual participant.

To combat this, Stream Chat now provides a slow mode feature to ensure that each participant has an equal opportunity to partake in the chat experience and to keep the chat readable. This feature can be enabled using a "cooldown period" set by administrators or moderators.

Note: The cooldown period is measured in seconds, and its value can be any whole number between 1 second and 120 seconds. For example, if you enable slow mode with an interval of 30 seconds, the user can only submit a message every 30 seconds.

Let's look at a simple example using the JavaScript SDK:

// implement a cooldown period with an interval of 30 seconds
await channel.enableSlowMode(30);

If you would like to disable slow mode with the JavaScript SDK, you can use the following disable method:

// disable slow mode entirely
await channel.disableSlowMode();

Note: The slow mode feature is disabled by default and can only be enabled by a channel administrator or a moderator.

If a user sends a message while the cooldown period is active, the API will return an error message. If the error message is not handled properly and displayed to the user, it may appear that the message they attempted to send had failed altogether, which can quickly become confusing. To mitigate this, when the slow mode feature is enabled, the channel object will include a cooldown property containing a countdown until the user can send another message. This property allows the front end to display the set cooldown interval to users in a meaningful way, such as disabling the submit button or displaying a brief message before allowing them to send another message.

Let's look at an example of how the above cooldown property on the channel object can be used with the JavaScript SDK:

// prepare the message to send
const message = channel.sendMessage({
	text: "That is a great looking rocket!"
});

// check if the cooldown key exists and the value is greater than 0
if (channel.cooldown != null && channel.cooldown > 0) {
	  
    // the message is a promise, so we can interrupt the flow
    message.then(() ==> {
        // disable the UI and display a banner 
        disableSendMessage(true);

        // restore the UI after the cooldown is finished
        setTimeout(() => disableSendMessage(false), channel.cooldown * 1000); 
    });
}

// send the message
await message;

In the above example, we use the disableSendMessage function and pass a boolean to control the UI. When passing the boolean true, we instruct the frontend to disable the UI's send message area. In contrast, when passing a false boolean parameter, the frontend will tell the UI to become accessible to the user. The experience you provide to the users within your chat application is entirely up to how you feel your users best interact with your application.

Note: If slow mode is enabled and a cooldown period is set, it is possible to increase the cooldown period's interval on the fly by calling enableSlowMode and passing a new interval to the function.