Chat UIKit React v3

Chat UIKit React

Chat UIKit

React

Version 3

Thread

Message threading is a feature in the UIKit that allows users to reply to each other's messages in a channel. When using the thread mode of message threading, users can reply to a message and start a new conversation in a separate thread. To display the thread view, use the Thread module.

Note : Threads is currently a beta feature that's still undergoing testing and development for improvement. Some inadvertent issues may arise while implementing this module. If you encounter any bugs or if you have any helpful feedback, contact our support team.

Usage

To start using the Thread module, implement the following code:

import Thread from '@sendbird/uikit-react/Thread';

List of properties

The following table lists the properties of the Thread module.

Properties

Required	Type	Description
channelUrl	string	Specifies the URL of the group channel. (Default: `null`)
message	UserMessage or FileMessage	Specifies the message in the group channel that the thread belongs to.

Optional	Type	Description
onHeaderActionClick	function	Specifies the prop to execute custom operations when the close button in the `ThreadHeader` component is clicked.
onMoveToParentMessage	function	Specifies the prop to execute custom operations when the `ThreadList` component is initialized and the screen scrolls to the parent message.
disableUserProfile	boolean	Determines whether to display the user profile preview dialog when selecting the user avatar. If set to `true`, the user profile preview dialog is not shown. (Default: `true`)
renderUserProfile	ReactElement	Renders a customized user profile preview dialog when selecting the user avatar. (Default: `null`)
onUserProfileMessage	function	Specifies the prop to receive callback when a user has successfully created a 1-to-1 chat from clicking on a user profile view. (Default: `null`)
renderHeader	ReactElement	Renders a customized thread header component. (Default: `null`)
renderParentMessageInfo	ReactElement	Renders a customized parent message info component. (Default: `null`)
renderMessage	ReactElement	Renders a customized reply message in the thread list component. (Default: `null`)
renderMessageInput	ReactElement	Renders a customized message input component. (Default: `null`)
renderCustomSeparator	ReactElement	Renders a customized date separator in the thread list component. (Default: `null`)
renderParentMessageInfoPlaceholder	ReactElement	Renders a customized placeholder for a parent message info status in the thread view. It passes `ParentMessageInfoStateTypes` as a parameter. (Default: `null`)
renderThreadListPlaceHolder	ReactElement	Renders a customized placeholder for a thread list status in the thread view. It passes `ThreadListStateTypes` as a parameter. (Default: `null`)

Context

To store and handle data that are used to build a thread UI, Sendbird UIKit provides two context objects: ThreadProvider and useThreadContext. The ThreadProvider is a context provider that manages all the logic and data used in the message thread view. The useThreadContext is a context hook that allows access to the provider's data.

ThreadProvider

The ThreadProvider contains input props and internal data that handle all the operations in the module. The provider stores data from Chat SDK in real-time and exports them to the UI components. The following code shows how to start using ThreadProvider.

import { ThreadProvider } from '@sendbird/uikit-react/Thread/context';

const CustomThreadComponent = () => {
  return (
    <ThreadProvider
      channelUrl="..."
      message={message}
      onHeaderActionClick={() => {}}
      onMovetoParentMessage={({ message, channel }) => {}}
    >
      // <CustomThreadUI /> or <ThreadUI />
    </ThreadProvider>
  );
};

List of properties

The following table lists the properties of ThreadProvider.

Properties

Required	Type	Description
channelUrl	string	Specifies the URL of the group channel. (Default: `null`)
message	UserMessage or FileMessage	Specifies the message in the group channel that the thread belongs to.

Optional	Type	Description
onHeaderActionClick	function	Specifies the prop to execute custom operations when the close button in the `ThreadHeader` component is clicked.
onMoveToParentMessage	function	Specifies the prop to execute custom operations when the `ThreadList` component is initialized and the screen scrolls to the parent message.
disableUserProfile	boolean	Determines whether to display the user profile preview dialog when selecting the user avatar. If set to `true`, the user profile preview dialog is not shown. (Default: `true`)
renderUserProfile	ReactElement	Renders a customized user profile preview dialog when selecting the user avatar. (Default: `null`)
onUserProfileMessage	function	Specifies the prop to receive callback when a user has successfully created a 1-to-1 chat from clicking on a user profile view. (Default: `null`)

Set current channel for customization

You should set the current channel with onHeaderActionClick callback when you customize.

import React, { useState } from 'react';
import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
import Channel from '@sendbird/uikit-react/Channel';
import ChannelList from '@sendbird/uikit-react/ChannelList';
import Thread from '@sendbird/uikit-react/Thread';

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

  return (
    <SendbirdProvider>
      <ChannelList activateChannelUrl={currentChannel?.url}>
      <Channel currentChannelUrl={currentChannel?.url}>
      <Thread
        onMoveToParentMessage={({ message, channel }) => {
          setCurrentChannel(channel);
        }}
      >
    </SendbirdProvider>
  )
}

useThreadContext

The useThreadContext hook exports the data in the provider to the UI components to create a functional view of message threads. Every UI component of any layer or level can get access to the data using the context hooks as long as they're inside the provider.

The following code shows how to start using useThreadContext.

import { useThreadContext } from '@sendbird/uikit-react/Thread/context';

See the code below on how to create the custom UI component using useThreadContext.

const CustomThreadUI = () => {
  const {
    channelState,
    currentChannel,
    parentMessageState,
    parentMessage,
    threadListState
    allThreadMessages,
    // ...
  } = useThreadContext();
  return (
    <div className="custom-thread-ui-component">
      // implement your component here
    </div>
  );
};

List of properties

The following table lists the properties of useThreadContext.

Property name	Type	Description
currentChannel	GroupChannel	Specifies the current group channel.
channelState	string/enum	Specifies the state of the `currentChannel` data from the Chat SDK. Acceptable values are: `NIL`, `LOADING`, `INVALID`, and `INITIALIZED`. (Default: `NIL`)
parentMessage	UserMessage or FileMessage	Specifies the parent message of the thread.
parentMessageState	string/enum	Specifies the state of `parentMessage` data from the Chat SDK. Acceptable values are: `NIL`, `LOADING`, `INVALID`, and `INITIALIZED`. (Default: `NIL`)
allThreadedMessages	array of objects	Specifies a list of all threaded messages.
threadListState	string/enum	Specifies the state of `allThreadedMessages` data from the Chat SDK. Acceptable values are: `NIL`, `LOADING`, `INVALID`, and `INITIALIZED`. (Default: `NIL`)
hasMorePrev	boolean	Determines whether to retrieve previous replies at the top of the thread list.
hasMoreNext	boolean	Determines whether to retrieve more replies in the thread list.
emojiContainer	EmojiContainer	Specifies a set of all emojis that can be used and customized in the thread.
isMuted	boolean	Determines whether the channel that the thread exists in is muted or not.
isChannelFrozen	boolean	Determines whether the channel that the thread exists in is frozen or not.

UI components

The UI components in the Thread module are the following: ThreadUI, ThreadHeader, ParentMessageInfo, ThreadList, ThreadListItem, and ThreadMessageInput. They're the default set of UI components that compose the thread view.

ThreadUI

The ThreadUI is the component that displays the basic screen of the module. It contains placeholders for error and loading statuses and renders various components shown in the screen. The following code shows how to implement ThreadUI.

import ThreadUI from '@sendbird/uikit-react/Thread/components/ThreadUI';

List of properties

The following table lists the properties of ThreadUI.

Property name	Type	Description
renderHeader	ReactElement	Renders a customized thread header component. (Default: `null`)
renderParentMessageInfo	ReactElement	Renders a customized parent message info component. (Default: `null`)
renderMessage	ReactElement	Renders a customized reply message in the thread list component. (Default: `null`)
renderMessageInput	ReactElement	Renders a customized message input component. (Default: `null`)
renderCustomSeparator	ReactElement	Renders a customized date separator in the thread list component. (Default: `null`)
renderParentMessageInfoPlaceholder	ReactElement	Renders a customized placeholder for a parent message info status in the thread view. It passes `ParentMessageInfoStateTypes` as a parameter. (Default: `null`)
renderThreadListPlaceHolder	ReactElement	Renders a customized placeholder for a thread list status in the thread view. It passes `ThreadListStateTypes` as a parameter. (Default: `null`)

See the code below on how to customize ThreadUI.

import { ThreadProvider } from '@sendbird/uikit-react/Thread/context';
import { ThreadListStateTypes } from '@sendbird/uikit-react/Thread/context/types';
import ThreadUI from '@sendbird/uikit-react/Thread/components/ThreadUI';

const CustomThreadComponent = () => {
  return (
    <ThreadProvider
      ...
    >
      // <CustomThreadUI /> or
      <ThreadUI
        renderMessage={({ message, chainTop, chainBottom, hasSeparator }) => {
          if (message.isUserMessage()) {
            return (
              <div className="thread-custom-user-message">
                // ...
              </div>
            );
          }
          return null;
        }}
        renderThreadListPlaceHolder={(type) => {
          if (type === ThreadListStateTypes.INVALID) {
            return (
              <div className="thread-custom-place-holder--error">
                // ...
              </div>
            );
          }
          return null;
        }}
        renderParentMessageInfoPlaceholder={(type) => {
          if (type === ThreadListStateTypes.NIL) {
            return (
              <div className="thread-custom-place-holder--empty">
                // ...
              </div>
            );
          }
          return null;
        }}
      />
    </ThreadProvider>
  );
};

ThreadHeader

The ThreadHeader is the header component of the ThreadUI that displays the thread title, channel name, and a close button that closes the thread view.

The following code shows how to implement ThreadHeader.

import ThreadHeader from '@sendbird/uikit-react/Thread/components/ThreadHeader';

Properties

Required	Type	Description
channelName	string	Specifies the name of the channel that the thread exits in.

Optional	Type	Description
renderActionIcon	ReactElement	Renders a customized close button icon that closes the thread view.
onActionIconClick	function	Specifies the prop to execute custom operations when the top-right icon in the thread header component is clicked. (Default: `null`)
onChannelNameClick	function	Specifies the prop to execute custom operations when the channel name in the thread header component is clicked. (Default: `null`)

ParentMessageInfo

The ParentMessageInfo component shows the parent message in the thread view located right below ThreadHeader. See the code below on how to implement ParentMessageInfo.

import ParentMessageInfo from '@sendbird/uikit-react/Thread/components/ParentMessageInfo';

ThreadList

The ThreadList component shows the number of replies in the thread and a list of all replies to that message are shown in a chronological order. The list shows both user and file messages and replies sent by the current user are differentiated from those sent by other members in different colors. The following code shows how to implement ThreadList.

import ThreadList from '@sendbird/uikit-react/Thread/components/ThreadList';

List of properties

The following table lists the properties of ThreadList.

Required	Type	Description
allThreadedMessages	array of objects	Specifies a list of all threaded messages.

Optional	Type	Description
renderMessage	ReactElement	Renders a customized reply message in the thread list component. (Default: `null`)
renderCustomSeparator	ReactElement	Renders a customized date separator in the thread list component. (Default: `null`)

See the code below on how to customize ThreadList.

import ThreadList from '@sendbird/uikit-react/Thread/components/ThreadList';

const customizedThreadList = () => {
  return (
    <ThreadList
      allThreadMessages={threadMessages}
      renderMessage={({ message, chainTop, chainBottom, hasSeparator }) => {}}
      renderCustomSeparator={({ message }) => {}}
      scrollRef={scrollRef}
      scrollBottom={scrollBottom}
    />
  )
}

ThreadListItem

The ThreadListItem displays each reply item, user and file message, in the ThreadList component.

import ThreadListItem from '@sendbird/uikit-react/Thread/components/ThreadListItem';

List of properties

The following table lists the properties of ThreadListItem.

Required	Type	Description
message	UserMessage or FileMessage	Specifies the message in the group channel that the thread belongs to.

Optional	Type	Description
chainTop	boolean	Determines whether to group the message with previously sent messages. (Default: `false`)
chainBottom	boolean	Determines whether to group the message with other messages that were sent afterward. (Default: `false`)
hasSeparator	boolean	Determines whether to render a customized date separator view in the message list component that separates the messages by date. (Default: `false`)
renderCustomSeparator	ReactElement	Renders a customized date separator in the thread list component. (Default: `null`)

ThreadMessageInput

The ThreadMessageInput is the component where users can reply to a parent message in the thread by sending a user or file message such as an image, video, or a document file. See the code below on how to implement ThreadMessageInput.

import ThreadMessageInput from '@sendbird/uikit-react/MessageThread/components/ThreadMessageInput';

On this page

Usage Context

ThreadProvider useThreadContext

UI components

ThreadUI ThreadHeader ParentMessageInfo ThreadList ThreadListItem ThreadMessageInput

Sample app