StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,

V extends CustomTrigger = CustomTrigger,

> = {

/** Additional props for `MessageInput` component: [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_input/#props) */

additionalMessageInputProps?: MessageInputProps<StreamChatGenerics, V>;

/** Additional props for `MessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/message_list/#props) */

additionalMessageListProps?: MessageListProps<StreamChatGenerics>;

/** Additional props for `Message` component of the parent message: [available props](https://getstream.io/chat/docs/sdk/react/message-components/message/#props) */

additionalParentMessageProps?: Partial<MessageProps<StreamChatGenerics>>;

/** Additional props for `VirtualizedMessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/virtualized_list/#props) */

additionalVirtualizedMessageListProps?: VirtualizedMessageListProps<StreamChatGenerics>;

/** If true, focuses the `MessageInput` component on opening a thread */

autoFocus?: boolean;

/** Injects date separator components into `Thread`, defaults to `false`. To be passed to the underlying `MessageList` or `VirtualizedMessageList` components */

enableDateSeparator?: boolean;

/** Custom thread input UI component used to override the default `Input` value stored in `ComponentContext` or the [MessageInputSmall](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputSmall.tsx) default */

Input?: React.ComponentType;

/** Custom thread message UI component used to override the default `Message` value stored in `ComponentContext` */

Message?: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>;

/** Array of allowed message actions (ex: ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply']). To disable all actions, provide an empty array. */

messageActions?: MessageActionsArray;

/** If true, render the `VirtualizedMessageList` instead of the standard `MessageList` component */

virtualized?: boolean;

StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,

V extends CustomTrigger = CustomTrigger,

props: ThreadProps<StreamChatGenerics, V>,

) => {

const { channel, channelConfig, thread } =

useChannelStateContext<StreamChatGenerics>('Thread');

const threadInstance = useThreadContext();

if ((!thread && !threadInstance) || channelConfig?.replies === false) return null;

// the wrapper ensures a key variable is set and the component recreates on thread switch

return (

// FIXME: TS is having trouble here as at least one of the two would always be defined

<ThreadInner

{...props}

key={`thread-${(thread ?? threadInstance)?.id}-${channel?.cid}`}

/>

);

isLoadingNext: nextValue.pagination.isLoadingNext,

isLoadingPrev: nextValue.pagination.isLoadingPrev,

parentMessage: nextValue.parentMessage,

replies: nextValue.replies,

StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,

V extends CustomTrigger = CustomTrigger,

props: ThreadProps<StreamChatGenerics, V> & { key: string },

) => {

const {

additionalMessageInputProps,

additionalMessageListProps,

additionalParentMessageProps,

additionalVirtualizedMessageListProps,

autoFocus = true,

enableDateSeparator = false,

Input: PropInput,

Message: PropMessage,

messageActions = Object.keys(MESSAGE_ACTIONS),

virtualized,

} = props;

const threadInstance = useThreadContext();

const { isLoadingNext, isLoadingPrev, parentMessage, replies } =

useStateStore(threadInstance?.state, selector) ?? {};

const {

thread,

threadHasMore,

threadLoadingMore,

threadMessages = [],

threadSuppressAutoscroll,

} = useChannelStateContext<StreamChatGenerics>('Thread');

const { closeThread, loadMoreThread } =

useChannelActionContext<StreamChatGenerics>('Thread');

const { customClasses } = useChatContext<StreamChatGenerics>('Thread');

const {

Message: ContextMessage,

ThreadHead = DefaultThreadHead,

ThreadHeader = DefaultThreadHeader,

ThreadInput: ContextInput,

VirtualMessage,

} = useComponentContext<StreamChatGenerics>('Thread');

const ThreadInput =

PropInput ?? additionalMessageInputProps?.Input ?? ContextInput ?? MessageInputFlat;

const ThreadMessage = PropMessage || additionalMessageListProps?.Message;

const FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;

const MessageUIComponent = ThreadMessage || FallbackMessage;

const ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;

useEffect(() => {

if (thread?.id && thread?.reply_count) {

// FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options

loadMoreThread();

}

}, [thread, loadMoreThread]);

const threadProps: Pick<

VirtualizedMessageListProps<StreamChatGenerics>,

| 'hasMoreNewer'

| 'loadMoreNewer'

| 'loadingMoreNewer'

| 'hasMore'

| 'loadMore'

| 'loadingMore'

| 'messages'

> = threadInstance

? {

loadingMore: isLoadingPrev,

loadingMoreNewer: isLoadingNext,

loadMore: threadInstance.loadPrevPage,

loadMoreNewer: threadInstance.loadNextPage,

messages: replies,

}

: {

hasMore: threadHasMore,

loadingMore: threadLoadingMore,

loadMore: loadMoreThread,

messages: threadMessages,

};

const messageAsThread = thread ?? parentMessage;

if (!messageAsThread) return null;

const threadClass =

customClasses?.thread ||

clsx('str-chat__thread-container str-chat__thread', {

'str-chat__thread--virtualized': virtualized,

});

const head = (

<ThreadHead

key={messageAsThread.id}

message={messageAsThread}

Message={MessageUIComponent}

{...additionalParentMessageProps}

/>

);

return (

<div className={threadClass}>

<ThreadHeader closeThread={closeThread} thread={messageAsThread} />

<ThreadMessageList

disableDateSeparator={!enableDateSeparator}

head={head}

Message={MessageUIComponent}

messageActions={messageActions}

suppressAutoscroll={threadSuppressAutoscroll}

threadList

{...threadProps}

{...(virtualized

? additionalVirtualizedMessageListProps

: additionalMessageListProps)}

/>

<MessageInput

focus={autoFocus}

Input={ThreadInput}

isThreadInput

parent={thread ?? parentMessage}

publishTypingEvent={false}

{...additionalMessageInputProps}

/>

</div>

);