Master scheduled messages with Sendbird for React

Table of Contents

1. Introduction
2. Implementing Scheduled Messaging with Cyberchat SDK
3. Setting Up the Sunbird UI Kit Application
4. Creating the Custom Message Input Component
5. Accessing the State with Sunbird State Context
6. Loading Scheduled Messages
7. Displaying the Scheduled Message List
8. Updating Scheduled Messages
9. Creating New Scheduled Messages
10. Canceling Scheduled Messages
11. Conclusion

Introduction

In this article, we will walk through the process of implementing scheduled messaging using the Cyberchat SDK for JavaScript within a Sunbird UI Kit application. Scheduled messaging allows users to schedule messages to be sent in the future. The JavaScript SDK can be used in any environment or framework within your existing application.

Implementing Scheduled Messaging with Cyberchat SDK

To implement scheduled messaging, we will start with a custom UI Kit application that is already set up. The Channel component of the application will use the "render message input" property to display the custom message input component within the conversation window.

Setting Up the Sunbird UI Kit Application

Before we begin implementing scheduled messaging, we need to set up the Sunbird UI Kit application. Please refer to the "Creating a Custom UI Kit App" video or the UI Kit documentation for instructions on how to get to this point.

Creating the Custom Message Input Component

To enable scheduled messaging, we need to Create a custom component called "Customize Message Input" which will render the message input component. This component will handle the input text and provide functionality for sending messages, attaching files, and scheduling messages.

Accessing the State with Sunbird State Context

To access the state of the application, we will use the Sunbird State Context along with the selectors provided by the SDK. This will allow us to implement functionalities like sending user messages. We will also use the Channel Context to check if there is a Current group channel and enable/disable certain features accordingly.

Loading Scheduled Messages

Next, we will implement the functionality to load and display the user's scheduled messages for the channel. This will involve retrieving the list of scheduled messages and the total count of scheduled messages using the chat SDK.

Displaying the Scheduled Message List

Once we have loaded the scheduled messages, we will display them in a list format. Each scheduled message will have options to update or cancel the message. The list will also Show the total count of scheduled messages for the channel.

Updating Scheduled Messages

Users will have the ability to update the content or the scheduled time of a message. We will implement the functionality to update scheduled messages by calling the appropriate SDK functions and providing the necessary parameters.

Creating New Scheduled Messages

In addition to updating messages, users can also create new scheduled messages. We will implement a form where users can enter the message content and schedule it for a future date and time. The form will utilize a calendar date picker to select the desired schedule.

Canceling Scheduled Messages

Users may also want to cancel scheduled messages. We will provide an option to cancel messages, which will call the cancel scheduled message function from the chat SDK. This will remove the message from the scheduled list and update the UI accordingly.

Conclusion

By the end of this article, You will have a fully functional application where users can schedule, update, and cancel messages within a group channel. The process involves setting up the Sunbird UI Kit application, creating the custom message input component, accessing the state with the Sunbird State Context, loading scheduled messages, displaying the scheduled message list, updating and canceling messages, and creating new scheduled messages.

Now, let's dive into the implementation details and step-by-step instructions for each of these components and functionalities. By following along, you will be able to successfully implement scheduled messaging in your own application using the Cyberchat SDK and Sunbird UI Kit.