Is UIKit a good fit for my use case?

Sendbird Chat UIKit
, ,
1

[Problem/Question]
I want to build a web chat experience (using React) where I don’t want to show the ChannelList, but instead default to a fixed distinct channel between 2 users. I want to display only the UI for the conversation between the 2 users. I’d be OK just hiding the ChannelList (UI on the left) and the ChannelSettings (UI on the right).

Further more, I want to automatically create that channel before loading the chat page. For this, I see 2 options: 1) using the platform API to create the channel on my server and sending down the channelUrl and 2) using the JS Chat SDK on the client side.

Is it possible to do this through UIKit? i.e. does UIKit provide access to the underlying sdk to do this?

2

Hello @cgsully,

As you’ve already hinted to, there are really two different components to this use case.

  1. Displaying the distinct conversation on the client side
  2. Automatic creation of the channel

For #1, the UIKit is a perfectly acceptable solution. You are not required to use all components of the UIKit. You can certainly use only the Conversation component and pass in a channelUrl of the channel you’ve already created.

For #2, the Platform API is probably the better solution in the long term. Creating the channel on your backend service and then passing that channelUrl to the client side would be the most efficient and secure way of handling automatic channel creation.

That being said, the UIKits to expose the underlying SDK which does provide you complete access to all the standard methods that the SDK has to offer. Just note that you’ll only be able to access the SDK in a component or hook that exists within the the SendbirdProvider HOC.

Here is an example of how you can access that underlying SDK. The example shows both hooks and HOC access: Sendbird UIKit - Customized App - StackBlitz

4

Thanks for the detailed response.
Can you point me to an example of using just the Conversation component with channelUrl?

Until I get that to work, I was trying to just show one single channel using ChannelList queries as such:

const [queries] = useState({
    channelListQuery: {
      channelUrlsFilter: [channel_url],
    },
});

<SendbirdProvider
        appId={appId} // Sendbird application ID.
        userId={userId} // user ID.
        accessToken={userToken} // User token issued when user is created
      >
        <ChannelList queries={queries} />
</SendbirdProvider>

But there is no effect on the ChannelList.
Any idea what I might be doing wrong?

Thanks!

5

I don’t think an example of just the Conversation component is really necessary. You can simply look at the example I’ve provided and see that I import the Conversation component as SBConversation and then pass in a channelUrl.

In terms of the problem problem you’re having with the ChannelList.
It should be const queries not const [queries].

  const queries = useMemo(() => ({
    channelListQuery: {
      // Should be an instance of GroupChannelListQueryParams
      // https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat_groupChannel.GroupChannelListQueryParams.html
      includeEmpty: true,
      limit: 50,
      order: 'chronological',
    },
    applicationUserListQuery: {
      // Should be an instance of ApplicaitonUserListQuery
      // https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat.ApplicationUserListQueryParams.html
      nicknameStartsWithFilter: 'Jackson',
    },
  }));
6

Thanks for the reply. I incorporated your suggestion.
Somehow I am having trouble with specifically channelUrlsFilter and userIdsFilter
I also tried using those in this stackblitz example and no luck: Sendbird UIKit - Custom Channel List Queries (forked) - StackBlitz
All the channels still continue showing up.

7

You’re using userIdsFilter incorrectly here.
In the comment of the sample I provided, it’s stated that you should be providing an instance of GroupChannelListQueryParams
So, userIdsFilter needs to be an instance of GroupChannelUserIdsFilter.
channelUrlsFilter is of type Array<string>

So if you wanted to use userIdsFilter you would do something like:

  const queries = useMemo(
    () => ({
      channelListQuery: {
        // Should be an instance of GroupChannelListQueryParams
        // https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat_groupChannel.GroupChannelListQueryParams.html
        includeEmpty: true,
        limit: 50,
        order: 'chronological',
        userIdsFilter: {
          includeMode: true,
          queryType: 'OR',
          userIds: ['testUser01', '567043'],
        },
      },
      applicationUserListQuery: {
        // Should be an instance of ApplicaitonUserListQuery
        // https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat.ApplicationUserListQueryParams.html
        nicknameStartsWithFilter: 'Jackson',
      },
    }),
    []
  );
8

Oops, actually that’s exactly what I am doing. I realized my prior mistake when I was looking at the documentation you pointed to. Here’s exactly what my query looks like now:

const queries = useMemo(
    () => ({
      channelListQuery: {
        includeEmpty: true,  // tried without this as well
        limit: 50,  // tried without this as well
        order: "chronological",  // tried without this as well
        userIdsFilter: {
          includeMode: true,  // tried without this as well
          queryType: "AND", // tried without this and using "OR"
          userIds: ["user-0"],
        },
      },
    }),
    []
);

Here I want to show only channels with “user-0” in it.

No matter what I change inside <SendbirdProvider></SendbirdProvider>, it has no impact. It seems to be always rendering the default UI.

Also, what about channelUrlsFilter?

Is there some top level change or initialization that I am missing?
Appreciate your patient with me!

Thanks!

9

Out of curiosity, are you clicking the custom query button at the very top of the demo? If not, it will only ever render the default query.

10

Yes, I am clicking the “Custom Query” button. For the default channelListQuery in the example, I see the ordering of channels getting updated, but the two specific filters I am interested in – channelUrlsFilter and userIdsFilter – seem to have no effect.

11

Update – I was examining the React DOM using the React Dev Tools Chrome Extension and for some reason, I am not seeing any of the attributes I am setting for ChannelList in the React DOM. For example, 1) I tried setting activeChannelUrl on ChannelList directly through the dev tool and that correctly updated the active channel as expected.
2) Then I tried adding the same activeChannelUrl prop in my code, but I did not see it in the React DOM in the dev tool.

 <ChannelList
  activeChannelUrl={channel_url}
  queries={queries}
/>

Now I am suspecting I am not setting up the custom app correctly :confused:

12

Figured it out.
I was importing SendbirdProvider incorrectly (doh!) as:
import SendbirdProvider from "@sendbird/uikit-react/App";
instead of:
import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";

Thanks for the support!

13

That would explain it! The App is an “All in One” app. Hopefully this allows you to implement just the Channel now as well.

1 Like