Get stream, System message customisation stream-chat - node.js

Question

community
I implemented stream-chat & stream-chat-react getStream
Hi, I want to show the system message on some events
For Ex: User A added User B to the chat (Here user A and User B is the name of both user but I don't want to send those message as it is because I want if user A changes their name to USER X then those previous messages also updated.) I want guidance on how I can achieve this.
Stream is allowing me to send system messages with the addMemberToChannel event but I am not able to find how I can use it for my specific case.
Expected Output:

Answer 1

For your case, you will avoid saving hardcoded data in the message's text property.
First, you create a system message on adding a user to a channel like this:
channel.addMembers([userId], {
text: 'added_users',
mentioned_users: [userId],
});
With the addMembers method on a channel object, you can add members to a channel and also pass a message object.
The message object accepts the message text and the mentioned_users properties.
You can use added_users or any text that you want to keep as a standard message for adding-members-system-message. You'll see why I use "added_users" in a second.
The Channel component renders system messages using the EventComponent. This component displays the text of the system message, with the date and some added styles.
You can create a custom event message component for your added_users message. This component can look like this:
import { EventComponent } from 'stream-chat-react';
function CustomEventMessage(props) {
const { message } = props;
const { text, mentioned_users, user } = message;
if (text === 'added_users') {
const message = user?.name + ' added ' + mentioned_users[0].name;
return (
<div className="str-chat__message--system">
<div className="str-chat__message--system__text">
<div className="str-chat__message--system__line"></div>
<p>{message}</p>
<div className="str-chat__message--system__line"></div>
</div>
</div>
);
}
// use the default event component
return <EventComponent {...props} />;
}
The CustomEventMessage component above accepts a message object prop which has the:
text: system message text
mentioned_users: mentioned users in the message
user: user who triggered the message
Next, you check if the text is added_users. If it is, then you provide a custom UI and message, which consists of the name of the user who triggered the message and the mentioned user (who was added to the channel)
I also used classnames from Stream's stylesheets so that I don't have to build mine.
Next, you add this component to the Channel component:
<Channel MessageSystem={CustomEventMessage}>
// ...
</Channel>
The message will now read as "Person X added Person Y" as seen in the image below:
If the text is not added_users, you pass the props to the default EventComponent.
Since you're saving the id of the mentioned user and not hardcoding the text ("Person A added Person B"), you will also get updated details about the users, even when they update their information.