Default channel name set to "Group Channel" when there are 2 users only. How to change that to show the person's name as personal chat?

Hey SendBird team,

We are facing this issue. When we start a new chat with a user in React UIKit it shows channel name as “Group Channel”. While in iOS UIKit it shows channel name as a person’s name with whom we are chatting. So how can we make changes in React UIKit to behave the same as iOS?
iOS image iOS_Chat
React image React_Chat

hi @Jay_Patel you can create a channel with name. Please refer https://docs.sendbird.com/javascript/group_channel#3_create_a_channel where you can use NAME parameter as the name of channel name.

Hey @Woo, I looked into that. But what I want to know is how I can set users name?
I can set name but that would be default for all channels which we create using that name.
What I exactly want to do is, if more than 1 user selected than we can use “Group Channel”, if only 1 user is selected than we can use selected users name to use as channel name.

I’m not quite sure what you mean by “default for all channels”. You can create name parameter dynamically when you want to create a channel. In other word, you can provide custom channel name each time you create a channel.

Suppose if I set name = “NAME” and that will set whenever I create new channel.
What I want to do is if there is only 1 user selected, I want to get the name of that user and use that as channel name.
Eg: I create channel with you and me. So if I see chat from my side it should show your name and if you see chat from your side it should show my name.

Are we able to do that in React UIKit?

Hello @Jay_Patel, I am Sravan, I work with react ui kit.
Sorry for your confusion, this could be a bug in react side, we will look into this and get back to you.
Can you tell us -

  • Which version of UIKit you are using?
  • What are your browser and O/S versions?
  • Are you using renderChannelPreview?

In our implementation, when you create a channel with empty name, server sets it to “Group Channel”. So, in client side, for 1:1 channels, if the name of the channel is default one, we show the partner’s name. This is how all clients are supposed to handle it(looks like something might be off in our case).
P.s. Can you ask these questions in UIKit section next time? We might miss your question if it is not in the correct section :pensive:

Hi @Sravan_S

Thanks for your quick answer for the @Jay_Patel question.
Here are the details,

  • UIKit Version (1.1.2)
  • Chrome 85.0.4183.83 (Official Build) (64-bit), Firefox 80.0 on Windows 10 (64 Bit)
  • Yes we are using the renderChannelPreview

Yes we are using the renderChannelPreview
Aha, in that case,
If you followed this example https://codesandbox.io/s/3-1-customizing-channelpreviewitem-ycsvs?file=/src/CustomizedChannelPreviewItem.js:1951-1990

It is recommended to use a logic similar to this ->
Other platforms also have implemented similar logic inside their UIKits

export const getChannelTitle = (channel = {}, currentUserId) => {
  // do not use channel.name if it is 'Group Channel'
  if (channel.name && channel.name !== "Group Channel") {
    return channel.name;
  }
  if (channel.members.length === 1) {
    return "NO_MEMBERS";
  }
  return channel.members
    .filter(({ userId }) => userId !== currentUserId)
    .map(({ nickname }) => (nickname || "(No Name)"))
    .join(", ");
};

Or

Use onBeforeCreateChannel https://github.com/sendbird/SendBird-JavaScript/tree/master/uikit-samples#channel-params to set channel name as that of your chat-partner on 1:1 channels
(See the below example)
https://codesandbox.io/s/3-3-customizing-channellist-sg9kx?file=/src/CustomizedApp.js:473-530

Foot note - let me start a conversation with team on how to handle this default name scenario properly

@Sravan_S

Thanks for your quick answer and sample of code. Yes it will work for me.

I have another query related to the UIKit, can we show the input search on User Modal. So that a chat user can search from userslist?

Or if you are planning to release this feature in upcoming versions?

See the sample image.

So about search, yes, we are having discussion about including it these days. Agree, its really painful for going through the whole list to find other users.

The problem that we are facing is - there is no nickname/userId search support in server side. If we implement a search in client side, the results will not be meaningful, right? No official release dates have been set, sadly

Anyways, we were planning to open the create-channel component in upcoming releases. So that incase our default modal is not really ideal, you can create a custom list, at-least