Get stream, System message customisation stream-chat

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:

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.