To display profile image before nickname in chat room in JS sample source Which part of the source should I edit?

1

Currently, I am making a service using the JS sample source.
To display profile image before nickname in chat room in JS sample source
Which part of the source should I edit?

Thank you for your valuable comments.

2

Hi @2_2 welcome to the Sendbird community!

Can you please share the link to the JS sample source and its folder you are referring to?
i.e. sendbird-javascript-samples/javascript/javascript-basic at master · sendbird/sendbird-javascript-samples · GitHub

3

The URL of the sample source I referenced is here.
thank you.

4

Thank you for the link.

You can add a user profile image by changing the two following files:

1. /src/js/components/Message.js

Add the following lines in line 51:

const userProfile = createDivEl({ className: styles['message-user-profile'], background: this.message.sender.profileUrl });
const messageContent = createDivEl({ className: styles['message-content'] });
messageContent.appendChild(userProfile);

2. /src/scss/message.scss

Add the following lines (& > .message-user-profile rule) after line 17:

  & > .message-content {
    display: inline;
    & > .message-user-profile {
      background-position: center center;
      background-size: contain;
      width: 25px;
      height: 25px;
      display: inline-block;
      vertical-align: middle;
      border-radius: 50%;
      margin-right: 8px;
    }
    & > .message-nickname {
    ...

Finally, you should get something like this:
image

5

Thank you very much for your detailed and kind reply.

1 Like