System Message

A system message is a message generated by a system event, such as updating the channel or muting a user. These are sent from the backend and displayed via the VirtualizedMessageList and MessageList components automatically. In this guide, we will override the default component with a custom one.

The Default System Message Component

For reference, the default system message component, EventComponent (image below) is very simple and displays all pertinent information about the event that occurred.

The two list components display these messages only if message.type === 'system'. This component receives the message object and Avatar component as props. The necessary event information is destructured from the message object.

const { created_at = '', event, text, type } = message;

Custom System Message Component

Our custom component will display the message text, date, and the actor (user who triggered the event) with added styling. For this complete override of the default component, we will utilize the MessageSystem prop on Channel. This adds our custom component to the ComponentContext where it is then pulled for use in the lists when needed.

success

To see your custom component in action, try muting a user by using the '/' command. For example, type '/mute' followed by a user mention, '@'. These commands must be enabled in the Dashboard.

.custom-system-message {
  padding: 5px;
  margin-top: 5px;
  align-items: center;
  display: flex;
  flex-direction: column;
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    left,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    right,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    right,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(
    to right,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  ); /* Standard syntax (must be last) */
}

const CustomSystemMessage = (props: EventComponentProps) => {
  const { Avatar = DefaultAvatar, message } = props;

  const { created_at = '', text, type, user } = message;
  const date = created_at.toString();

  if (type === 'system') {
    return (
      <div className='custom-system-message'>
        <span>
          Event: {text} at {date}
        </span>
        <span>
          Actor: <Avatar image={user?.image} shape={'square'} size={20} />
          {user?.name}
        </span>
      </div>
    );
  }

  return null;
};

const App = () => (
  <Chat client={chatClient}>
    <ChannelList />
    <Channel MessageSystem={CustomSystemMessage}>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);

The Result: