Group channel migration guide

UIKit v3 for React introduces GroupChannel and GroupChannelList modules. Previously, channel lists and chat were handled through Channel and ChannelList modules. The following are the key enhancements made.

• Renamed Channel to GroupChannel: To eliminate confusion, we've renamed our Channel module to GroupChannel which also aligns with OpenChannel, distinguishing different channel types.

• Local caching capability: UIKit for React now supports local caching functionalities, allowing you to experience a more efficient chat environment.

See the following paths to import modules related to GroupChannel and GroupChannelList.

import { GroupChannel } from '@sendbird/uikit-react/GroupChannel';
import { GroupChannelProvider, useGroupChannelContext } from '@sendbird/uikit-react/GroupChannel/context';
import { GroupChannelHeader } from '@sendbird/uikit-react/GroupChannel/components/GroupChannelHeader';
import { GroupChannelUI } from '@sendbird/uikit-react/GroupChannel/components/GroupChannelUI';
import { FileViewer } from '@sendbird/uikit-react/GroupChannel/components/FileViewer';
import { FrozenNotification } from '@sendbird/uikit-react/GroupChannel/components/FrozenNotification';
import { Message } from '@sendbird/uikit-react/GroupChannel/components/Message';
import { MessageInputWrapper, VoiceMessageInputWrapper } from '@sendbird/uikit-react/GroupChannel/components/MessageInputWrapper';
import { MessageList } from '@sendbird/uikit-react/GroupChannel/components/MessageList';
import { RemoveMessageModal } from '@sendbird/uikit-react/GroupChannel/components/RemoveMessageModal';
import { TypingIndicator } from '@sendbird/uikit-react/GroupChannel/components/TypingIndicator';
import { UnreadCount } from '@sendbird/uikit-react/GroupChannel/components/UnreadCount';
import { SuggestedMentionList } from '@sendbird/uikit-react/GroupChannel/components/SuggestedMentionList';

The App component now uses GroupChannel and GroupChannelList instead of Channel and ChannelList. However, if you wish to continue using Channel and ChannelList, use enableLegacyChannelModules to ensure the previous components are still available for use.

import SendbirdApp from '@sendbird/uikit-react/App'

const App = () => (
  <SendbirdApp
    // ...
    enableLegacyChannelModules
  />
)

When switching from ChannelList and ChannelListProvider to GroupChannelList and GroupChannelListProvider, take note of the following changes in props and context.

The following changes have been made to the props of GroupChannelList.

The following props were added.

Previously, the onChannelSelect prop was used as a callback function that is invoked when a channel is selected and when it is created. The new onChannelCreated prop serves to separate the callback function for the two cases.

The following code snippet shows an example of using onChannelCreated to set the current channel when a new channel is created.

const App = () => {
  const [currentChannel, setCurrentChannel] = useState(null);

  const handleSetCurrentChannel = (channel: GroupChannel) => {
    setCurrentChannel(channel);
  };

  return (
    <div>
      <GroupChannelList
        onChannelSelect={handleSetCurrentChannel}
        onChannelCreated={handleSetCurrentChannel}
      />
      <GroupChannel
        channelUrl={currentChannel?.url ?? ''}
      />
    </div>
  )
}

The following props were renamed.

The applicationUserListQuery that was previously contained within the queries props has been removed. You can now customize the applicationUserListQuery when creating a channel in the CreateChannel.

The following changes are made to the context provided by useGroupChannelListContext . Take note of it when switching from the ChannelListProvider to GroupChannelListProvider.

When switching from Channel and ChannelProvider to GroupChannel and GroupChannelProvider, review the following section and make necessary changes to the props and context.

The following changes have been made to the props.

// Before
<Channel
  renderMessage={(props) => {
    return <div>{'my custom message child'}</div>;
  }}
/>;

// Before
<Channel
  onBeforeSendUserMessage={(text, quotedMessage) => {
    const params = new UserMessageCreateParams();
    params.message = text;
    params.parentMessageId = quotedMessage.messageId;
    params.customType = 'custom-type';
    return params;
  }}
/>

<GroupChannel
  renderMessage={({ message }) => {
    if (message.type === 'filtered') return <></>; // render empty component.
    return null; // render default component.
  }}
/>

// Before
const { sendMessage } = useChannelContext();
sendMessage({
  message: message,
  quoteMessage: parentMessage,
  mentionedUsers: mentionedUsers,
  mentionTemplate: mentionTemplate,
});