Thread

The Thread component renders a list of replies tied to a single parent message in a channel's main message list. A Thread maintains its own state and renders its own MessageList and MessageInput components. Each piece of rendered UI can be overridden with custom components either drawn from the ComponentContext or supplied via props.

The Thread component consumes the contexts established in Channel and does not have any required props.

Basic Usage

As a context consumer, the Thread component must be rendered as a child of the Channel component. To enable smooth Thread mount and unmount behavior, wrap the main channel components in the Window component. Window handles width changes in the main channel to ensure a seamless user experience when opening and closing a Thread.

<Chat client={client}>
  <ChannelList />
  <Channel>
    <Window>
      <MessageList />
      <MessageInput />
    </Window>
    <Thread />
  </Channel>
</Chat>

UI Customization

Since a Thread contains most of the pieces of a Channel component, just in an encapsulated form, many aspects and components can be customized in a similar way. The UI components for both Message and MessageInput can be overridden via props if you desire different UI from the styles rendered in the main Channel. ThreadHeader and ThreadStart are two overridable UI components unique to Thread that can be drawn from the ComponentContext.

Example 1 - The below example shows how to render different UI for messages and the input within a Thread, versus those rendered in the main Channel.

note

A common pattern we use in the library is to first check props to see if a value/component exists, and if not, pull from context.

const MainInput = (props) => {
  // render main `MessageInput` UI component here
};

const MainMessage = (props) => {
  // render main `Message` UI component here
};

const ThreadInput = (props) => {
  // render thread `MessageInput` UI component here
};

const ThreadMessage = (props) => {
  // render thread `Message` UI component here
};

<Chat client={client}>
  <ChannelList />
  <Channel Input={MainInput} Message={MainMessage}>
    <Window>
      <MessageList />
      <MessageInput />
    </Window>
    <Thread Input={ThreadInput} Message={ThreadMessage} />
  </Channel>
</Chat>;

Example 2 - The below example shows how to provide custom UI for the ThreadHeader and ThreadStart components. ThreadHeader is rendered above the UI for the thread's parent Message component and at the top of the Thread. ThreadStart serves as a separator between the parent message and the MessageList of replies.

const CustomThreadHeader = (props) => {
  // render thread header UI component here
};

const CustomThreadStart = (props) => {
  // render thread start UI component here
};

<Chat client={client}>
  <ChannelList />
  <Channel ThreadHeader={CustomThreadHeader} ThreadStart={CustomThreadStart}>
    <Window>
      <MessageList />
      <MessageInput />
    </Window>
    <Thread />
  </Channel>
</Chat>;

Example 3 - To customize the combo of the thread's parent message and the ThreadStart separator, you can create a custom ThreadHead component and pass it to the Channel props. It then will be stored in the ComponentContext['ThreadHead']

const CustomThreadHead = (props) => {
  // render thread header UI component here
};

<Chat client={client}>
  <ChannelList />
  <Channel ThreadHead={CustomThreadHead} ThreadStart={CustomThreadStart}>
    <Window>
      <MessageList />
      <MessageInput />
    </Window>
    <Thread />
  </Channel>
</Chat>;

Props

additionalMessageInputProps

Additional props to be passed to the underlying MessageInput component.

Type
object

additionalMessageListProps

Additional props to be passed to the underlying MessageList component.

Type
object

additionalParentMessageProps

Additional props to be passed to the underlying Message component, which represents the thread's parent message.

Type
object

additionalVirtualizedMessageListProps

Additional props for VirtualizedMessageList component.

Type
object

autoFocus

If true, focuses the MessageInput component on opening a thread.

Type	Default
boolean	true

enableDateSeparator

Controls injection of

UI component into underlying MessageList or VirtualizedMessageList.

Type	Default
boolean	false

fullWidth

If true, displays the thread at 100% width of its parent container, useful for mobile styling.

Type	Default
boolean	false

Input

Custom thread input UI component used to override the optional Input value stored in ComponentContext or the default. For the applications using theme version 1, the default is MessageInputSmall. Applications using theme version 2 will use MessageInputFlat by default.

Type	Default
component	/

Message

Custom thread message UI component used to override the default Message value stored in ComponentContext.

Type	Default
component	ComponentContext['Message']

messageActions

Array of allowed message actions (ex: 'edit', 'delete', 'reply'). To disable all actions, provide an empty array.

Type	Default
array	['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply']

virtualized

If true, render the VirtualizedMessageList instead of the standard MessageList component.

Type
boolean