diff --git a/docusaurus/docs/React/components/contexts/component-context.mdx b/docusaurus/docs/React/components/contexts/component-context.mdx
index 0dedce6ab..6e4318f2f 100644
--- a/docusaurus/docs/React/components/contexts/component-context.mdx
+++ b/docusaurus/docs/React/components/contexts/component-context.mdx
@@ -18,6 +18,35 @@ Pull values from context with our custom hook:
const { Attachment, Avatar, Message } = useComponentContext();
```
+## WithComponents
+
+A component override functionality which utilises `ComponentContext` under the hood. This is direct replacement for a prop-based component overrides which are now slowly being deprecated.
+
+### Basic Usage of WithComponents
+
+In this case, top-level [`MessageInput`](../message-input-components/message-input.mdx) component reaches for the closest overrides and applies `MessageInputUi1`, the [`Thread`](../core-components/thread.mdx) component uses [`MessageInput`](../message-input-components/message-input.mdx) internally and its UI can be also overriden - in this case, the closest one provides override with component `MessageInputUi2`. If we were to remove this `WithComponents` wrapper over [`Thread`](../core-components/thread.mdx) component, the closest override for [`Thread`](../core-components/thread.mdx)'s [`MessageInput`](../message-input-components/message-input.mdx) component would be `MessageInputUi1`.
+
+```tsx
+const MessageInputUi1 = () => {
+ /*...*/
+};
+const MessageInputUi2 = () => {
+ /*...*/
+};
+
+
+
+
+
+
+
+
+
+
+
+;
+```
+
## Values
### Attachment
diff --git a/docusaurus/docs/React/components/contexts/thread-context.mdx b/docusaurus/docs/React/components/contexts/thread-context.mdx
new file mode 100644
index 000000000..c45f0d1d1
--- /dev/null
+++ b/docusaurus/docs/React/components/contexts/thread-context.mdx
@@ -0,0 +1,22 @@
+---
+id: thread-context
+title: ThreadContext
+---
+
+`ThreadContext` - just like any other React context - is used for dependency injection. What makes it different in this case is `ThreadProvider`.
+
+## ThreadProvider
+
+Is a provider which wraps [`Channel`](../core-components/channel.mdx) component and takes [`Thread` instance]() as a value. The [`Channel`](../core-components/channel.mdx) wrapper acts as a temporary measure to make [`Thread` component](../core-components/thread.mdx) compatible with the new architecture which relies on [`Thread` instance](). The reliance on channel is temporary and will become deprecated in the future.
+
+Thread component newly prioritizes [`Thread` instance]() if rendered under [`ThreadProvider`](../contexts/thread-context.mdx#threadprovider) otherwise falls back to accessing thread from [`Channel` state](../contexts/channel-state-context.mdx).
+
+### Basic Usage
+
+```tsx
+import { Thread, ThreadProvider } from 'stream-chat-react';
+
+
+
+;
+```
diff --git a/docusaurus/docs/React/components/core-components/thread-list-item.mdx b/docusaurus/docs/React/components/core-components/thread-list-item.mdx
new file mode 100644
index 000000000..b0d8f0bac
--- /dev/null
+++ b/docusaurus/docs/React/components/core-components/thread-list-item.mdx
@@ -0,0 +1,21 @@
+---
+id: thread-list-item
+title: ThreadListItem
+---
+
+An item component rendered within [`ThreadList` component](./thread-list.mdx). The item is divided into two components:
+
+`ThreadListItem` - a component and provider which renders `ThreadListItemUi`
+`ThreadListItemUi` - a component which renders the actual UI elements
+
+The goal is that as integrator you can provide a different look to your component while preserving the behavior or you can replace the behavior while keeping the default UI or you can change both if you require so.
+
+## Props
+
+### thread
+
+A thread instance provided by the [`ThreadList`](../core-components/thread-list.mdx).
+
+| Type |
+| ------ |
+| Thread |
diff --git a/docusaurus/docs/React/components/core-components/thread-list.mdx b/docusaurus/docs/React/components/core-components/thread-list.mdx
new file mode 100644
index 000000000..a57778c41
--- /dev/null
+++ b/docusaurus/docs/React/components/core-components/thread-list.mdx
@@ -0,0 +1,27 @@
+---
+id: thread-list
+title: ThreadList
+---
+
+`ThreadList` is a component which renders individual thread instances ([`Thread`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts)) stored within `ThreadManager`. It handles pagination triggers and virtualization through the help of the [Virtuoso](https://virtuoso.dev) virtualized list component. The rest of the business logic lives within ThreadManager and Thread classes. ThreadManager instance gets activated whenever ThreadList renders - activation is necessary as it tells the SDK that user "sees" this list and can update state accordingly whenever appropriate events arrive.
+
+If used in default form and rendered within `ThreadView` component it also allows to set active thread and handles `Thread` activation (similar to `ThreadManager` activation).
+
+## Basic Usage
+
+```tsx
+
+ {/*...*/}
+
+
+```
+
+## Props
+
+### virtuosoProps
+
+Props to be passed to the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api/interfaces/VirtuosoProps).
+
+| Type |
+| ------ |
+| object |
diff --git a/docusaurus/docs/React/components/utility-components/chat-view.mdx b/docusaurus/docs/React/components/utility-components/chat-view.mdx
new file mode 100644
index 000000000..f62d694a6
--- /dev/null
+++ b/docusaurus/docs/React/components/utility-components/chat-view.mdx
@@ -0,0 +1,53 @@
+---
+id: chat-view
+title: ChatView
+keywords: [example, chat view, channel view, thread view, thread adapter]
+---
+
+`ChatView` is component itself and a set of components which allow for a drop-in implementation of different chat views - the channel view and thread view. This drop-in solution allows your users to easily switch between said views without having to implement such mechanism yourself. It consists of:
+
+- `ChatView` - a provider that holds information about the selected view
+- `ChatView.Selector` - selector which allows to set the required view
+- `ChatView.Channels` - a wrapper that renders its children when `ChatView` value is equal to `channels`
+- `ChatView.Threads` - a provider and a wrapper that renders its children when `ChatView` value is equal to `threads`, exposes `ThreadsViewContext` under which `ThreadList` can set an active thread
+- `ChatView.ThreadAdapter` - a wrapper which can access an active thread from the `ThreadsViewContext` and forwards it to the [`ThreadProvider`](../contexts/thread-context.mdx)
+
+## Basic Usage
+
+```tsx
+import {
+ Chat,
+ ChatView,
+ ChannelList,
+ Channel,
+ ThreadList,
+ Thread,
+ useCreateChatClient,
+} from 'stream-chat-react';
+
+const App = () => {
+ const chatClient = useCreateChatClient(/*...*/);
+
+ if (!chatClient) return null;
+
+ return (
+
+
+
+ {/* Channel View */}
+
+
+ {/*...*/}
+
+ {/* Thread View */}
+
+
+
+
+
+
+
+
+ );
+};
+```
diff --git a/docusaurus/docs/React/components/utility-components/view-components.mdx b/docusaurus/docs/React/components/utility-components/view-components.mdx
new file mode 100644
index 000000000..7a250c012
--- /dev/null
+++ b/docusaurus/docs/React/components/utility-components/view-components.mdx
@@ -0,0 +1,97 @@
+---
+id: view-components-and-thread-adapter
+title: View Components and Thread Adapter
+---
+
+ChatView set of components is a view switching mechanism that can be utilised by integrators to quickly implement switching between thread and channel views.
+
+Available components:
+
+- `ChatView` - wrapper with context holding the information about currently active view (`channels` & `threads`)
+- `ChatView.Threads` - view used for thread-focused application structure with `ThreadsViewContext` that _can be_ utilised by `ThreadList` to set active thread
+- `ChatView.Channels` - view used for channel-focused application structure
+- `ChatView.Selector` - list with buttons with bound actions for switching views
+- `ChatView.ThreadAdapter` - utilises `ThreadsViewContext` and wraps `Thread` component in necessary `ThreadProvider`
+
+This set of components is provided as-is and offers very limited customizability as the underlying logic is super simple. Integrators are encouraged to build their own switching system if they require it.
+
+### Usage
+
+```tsx
+import {
+ Chat,
+ ChatView,
+ ChannelList,
+ Channel,
+ ThreadList,
+ Thread,
+ Window,
+} from 'stream-chat-react';
+
+// application structure which allows users to switch between views
+
+
+
+ {/* channel-focused structure */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* thread-focused structure */}
+
+
+
+
+
+
+
+;
+```
+
+### Custom Thread-focused Structure
+
+To build your custom thread-focused structure you'll need these four baseline components; `Thread`, `ThreadList`, `ThreadProvier` and `WithComponents` for component overrides.
+
+:::note
+For presentation purposes our custom `ThreadListItemUi` component is loosely defined within `CustomThreadsView` and thus it isn't stable. To achieve best performance make sure your components
+are stable and defined outside other component's scope.
+:::
+
+```tsx
+import { WithComponents, ThreadListItemUi, ThreadList, ThreadProvider } from 'stream-chat-react';
+
+export const CustomThreadsView = () => {
+ const [activeThread, setActiveThread] = useState(undefined);
+
+ return (
+
+ );
+};
+```
diff --git a/docusaurus/docs/React/guides/custom-threads-view.mdx b/docusaurus/docs/React/guides/custom-threads-view.mdx
new file mode 100644
index 000000000..f9c7f9c4a
--- /dev/null
+++ b/docusaurus/docs/React/guides/custom-threads-view.mdx
@@ -0,0 +1,62 @@
+---
+id: custom-threads-view
+title: Custom Threads View
+keywords: [cookbook, threads, view]
+---
+
+Our SDK comes with [`ChatView`](../components/utility-components/chat-view.mdx) which allows for an easy integration of different views. In this guide we'll show how to implement custom threads view while utilising core components and hooks.
+
+## Required Components & Hooks
+
+These components and hooks are required for your own implementation to work properly:
+
+- `ThreadList`
+- `ThreadListItem` - a provider for `ThreadListItemUi` with thread information, will be used to forward custom click event to the `ThreadListItemUi` button
+- `ThreadProvider` - "adapter" for Thread component to work properly with [`Thread` instance](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts)
+- `Thread` - provides [`MessageList`](../components/core-components/message-list.mdx) with [`MessageInput`](../components/message-input-components/message-input.mdx) adjusted for threads
+- `useActiveThread` - takes your selected thread instance and handles its activity state (`Thread.activate()` & `Thread.deactivate()`) based on document focus and visibility
+
+## Building Custom Threads View
+
+```tsx
+import {
+ ThreadList,
+ ThreadListItem,
+ ThreadProvider,
+ Thread,
+ WithComponents,
+ useActiveThread,
+} from 'stream-chat-react';
+
+export const CustomThreadsView = () => {
+ const [activeThread, setActiveThread] = useState(undefined);
+
+ useActiveThread({ activeThread });
+
+ return (
+
+ );
+};
+```
diff --git a/docusaurus/docs/React/guides/sdk-state-management.mdx b/docusaurus/docs/React/guides/sdk-state-management.mdx
index 22ec7e1ee..89881ac7c 100644
--- a/docusaurus/docs/React/guides/sdk-state-management.mdx
+++ b/docusaurus/docs/React/guides/sdk-state-management.mdx
@@ -134,6 +134,146 @@ export const CustomChannelList = (props: ChannelListProps) => {
};
```
+## Thread and ThreadManager
+
+With the new [threads feature]() we've decided to refresh our state management and moved to a subscribable POJO with selector based system to make developer experience better when it came to rendering information provided by our `StreamChat` client.
+
+:::note
+This change is currently only available within `StreamChat.threads` but will be reused across the whole SDK later on.
+:::
+
+### Why POJO (State Object)
+
+Our SDK holds and provides A LOT of information to our integrators and each of those integrators sometimes require different data or forms of data to display to their users. All of this important data now lives within something we call state object and through custom-tailored selectors our integrators can access the combination of data they require without any extra overhead and performance to match.
+
+### What are Selectors
+
+Selectors are functions provided by integrators that run whenever state object changes. These selectors should return piece of that state that is important for the appropriate component that renders that piece of information. Selectors itself should not do any heavy data computations that could resolve in generating new data each time the selector runs (arrays and objects), use pre-built hooks with computed state values or build your own if your codebase requires it.
+
+#### Rules of Selectors
+
+1. Selectors should return array of data sorted by their "change factor"; meaning values that change often should come first for the best performance.
+
+```ts
+const selector = (nextValue: ThreadManagerState) => [
+ nextValue.unreadThreadsCount, // <-- changes often
+ nextValue.active, // <-- changes less often
+ nextvalue.lastConnectionDownAt, // <-- changes rarely
+];
+```
+
+2. Selectors should live outside components scope or should be memoized if it requires "outside" information (`userId` for `read` object for example). Not memoizing selectors (or not stabilizing them) will lead to bad performance as each time your component re-renders, the selector function is created anew and `useSimpleStateStore` goes through unsubscribe and resubscribe process unnecessarily.
+
+```tsx
+// ❌ not okay
+const Component1 = () => {
+ const [latestReply] = useThreadState((nextValue: ThreadState) => [
+ nextValue.latestReplies.at(-1),
+ ]);
+
+ return
;
+};
+```
+
+3. Break your components down to the smallest reasonable parts that each take care of the apropriate piece of state if it makes sense to do so.
+
+### Accessing Reactive State
+
+Our SDK currently allows to access two of these state structures - in [Thread]() and [ThreadManager]() instances under `state` property.
+
+#### Vanilla
+
+```ts
+import { StreamChat } from 'stream-chat';
+
+const client = new StreamChat(/*...*/);
+
+// calls console.log with the whole state object whenever it changes
+client.threads.state.subscribe(console.log);
+
+let latestThreads;
+client.threads.state.subscribeWithSelector(
+ // called each time theres a change in the state object
+ (nextValue) => [nextValue.threads],
+ // called only when threads change (selected value)
+ ([threads]) => {
+ latestThreads = threads;
+ },
+);
+
+// returns lastest state object
+const state = client.threads.state.getLatestValue();
+
+const [thread] = latestThreads;
+
+// thread instances come with the same functionality
+thread?.state.subscribe(/*...*/);
+thread?.state.subscribeWithSelector(/*...*/);
+thread?.state.getLatestValue(/*...*/);
+```
+
+#### useSimpleStateStore Hook
+
+For the ease of use - the React SDK comes with the appropriate state acesss hook which wraps `SimpleStateStore.subscribeWithSelector` API for the React-based applications.
+
+```tsx
+import { useSimpleStateStore } from 'stream-chat-react';
+import type { ThreadManagerState } from 'stream-chat';
+
+const selector = (nextValue: ThreadManagerState) => [nextValue.threads] as const;
+
+const CustomThreadList = () => {
+ const { client } = useChatContext();
+ const [threads] = useSimpleStateStore(client.threads.state, selector);
+
+ return (
+
diff --git a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap
index 47619c06a..2054e8874 100644
--- a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap
+++ b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap
@@ -50,6 +50,9 @@ exports[`VirtualizedMessageComponents EmptyPlaceholder should render for main me
exports[`VirtualizedMessageComponents Header should not render custom head in Header when loading more messages, but the LoadingIndicator 1`] = `
+
+ Custom head
+
diff --git a/src/components/MessageList/renderMessages.tsx b/src/components/MessageList/renderMessages.tsx
index 85948ffe4..d44a050b5 100644
--- a/src/components/MessageList/renderMessages.tsx
+++ b/src/components/MessageList/renderMessages.tsx
@@ -1,13 +1,18 @@
import React, { Fragment, ReactNode } from 'react';
+import type { UserResponse } from 'stream-chat';
+
import { GroupStyle, isDateSeparatorMessage } from './utils';
-import { Message, MessageProps } from '../Message';
+import { Message } from '../Message';
+import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
+import { EventComponent as DefaultMessageSystem } from '../EventComponent';
+import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from './UnreadMessagesSeparator';
import { ComponentContextValue, CustomClasses } from '../../context';
import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
-import type { UserResponse } from 'stream-chat';
import type { ChannelUnreadUiState, DefaultStreamChatGenerics } from '../../types';
import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { MessageProps } from '../Message';
export interface RenderMessagesOptions<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -61,7 +66,13 @@ export function defaultRenderMessages<
readData,
sharedMessageProps: messageProps,
}: RenderMessagesOptions) {
- const { DateSeparator, HeaderComponent, MessageSystem, UnreadMessagesSeparator } = components;
+ const {
+ DateSeparator = DefaultDateSeparator,
+ HeaderComponent,
+ MessageSystem = DefaultMessageSystem,
+ UnreadMessagesSeparator = DefaultUnreadMessagesSeparator,
+ } = components;
+
const renderedMessages = [];
let firstMessage;
for (let index = 0; index < messages.length; index++) {
diff --git a/src/components/Reactions/ReactionSelector.tsx b/src/components/Reactions/ReactionSelector.tsx
index d8fa2b53d..4c5875ed0 100644
--- a/src/components/Reactions/ReactionSelector.tsx
+++ b/src/components/Reactions/ReactionSelector.tsx
@@ -1,15 +1,15 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import clsx from 'clsx';
-import { isMutableRef } from './utils/utils';
-
-import { AvatarProps, Avatar as DefaultAvatar } from '../Avatar';
+import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
+import { isMutableRef } from './utils/utils';
+import { Avatar as DefaultAvatar } from '../Avatar';
import { useComponentContext } from '../../context/ComponentContext';
import { useMessageContext } from '../../context/MessageContext';
+import { defaultReactionOptions } from './reactionOptions';
-import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
-
+import type { AvatarProps } from '../Avatar';
import type { DefaultStreamChatGenerics } from '../../types/types';
import type { ReactionOptions } from './reactionOptions';
@@ -33,7 +33,10 @@ export type ReactionSelectorProps<
reaction_counts?: Record;
/** An object containing summary for each reaction type on a message */
reaction_groups?: Record;
- /** A list of the currently supported reactions on a message */
+ /**
+ * @deprecated
+ * A list of the currently supported reactions on a message
+ * */
reactionOptions?: ReactionOptions;
/** If true, adds a CSS class that reverses the horizontal positioning of the selector */
reverse?: boolean;
@@ -57,7 +60,7 @@ const UnMemoizedReactionSelector = React.forwardRef(
const {
Avatar: contextAvatar,
- reactionOptions: contextReactionOptions,
+ reactionOptions: contextReactionOptions = defaultReactionOptions,
} = useComponentContext('ReactionSelector');
const {
handleReaction: contextHandleReaction,
diff --git a/src/components/Reactions/ReactionsList.tsx b/src/components/Reactions/ReactionsList.tsx
index 22c6c6182..d5974854a 100644
--- a/src/components/Reactions/ReactionsList.tsx
+++ b/src/components/Reactions/ReactionsList.tsx
@@ -29,7 +29,10 @@ export type ReactionsListProps<
reaction_counts?: Record;
/** An object containing summary for each reaction type on a message */
reaction_groups?: Record;
- /** A list of the currently supported reactions on a message */
+ /**
+ * @deprecated
+ * A list of the currently supported reactions on a message
+ * */
reactionOptions?: ReactionOptions;
/** An array of the reaction objects to display in the list */
reactions?: ReactionResponse[];
diff --git a/src/components/Reactions/hooks/useProcessReactions.tsx b/src/components/Reactions/hooks/useProcessReactions.tsx
index d84e70a1c..cded26fb5 100644
--- a/src/components/Reactions/hooks/useProcessReactions.tsx
+++ b/src/components/Reactions/hooks/useProcessReactions.tsx
@@ -1,6 +1,7 @@
import { useCallback, useMemo } from 'react';
import { useComponentContext, useMessageContext } from '../../../context';
+import { defaultReactionOptions } from '../reactionOptions';
import type { ReactionsListProps } from '../ReactionsList';
import type { DefaultStreamChatGenerics } from '../../../types/types';
@@ -40,9 +41,9 @@ export const useProcessReactions = <
const { message, sortReactions: contextSortReactions } = useMessageContext(
'useProcessReactions',
);
- const { reactionOptions: contextReactionOptions } = useComponentContext(
- 'useProcessReactions',
- );
+ const {
+ reactionOptions: contextReactionOptions = defaultReactionOptions,
+ } = useComponentContext('useProcessReactions');
const reactionOptions = propReactionOptions ?? contextReactionOptions;
const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
diff --git a/src/components/Thread/Thread.tsx b/src/components/Thread/Thread.tsx
index 8970f180c..6ede0894a 100644
--- a/src/components/Thread/Thread.tsx
+++ b/src/components/Thread/Thread.tsx
@@ -18,11 +18,13 @@ import {
useChatContext,
useComponentContext,
} from '../../context';
+import { useStateStore, useThreadContext } from '../../components/Threads';
import type { MessageProps, MessageUIComponentProps } from '../Message/types';
import type { MessageActionsArray } from '../Message/utils';
import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types';
+import type { ThreadState } from 'stream-chat';
export type ThreadProps<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -60,13 +62,25 @@ export const Thread = <
props: ThreadProps,
) => {
const { channel, channelConfig, thread } = useChannelStateContext('Thread');
+ const threadInstance = useThreadContext();
- if (!thread || channelConfig?.replies === false) return null;
+ if ((!thread && !threadInstance) || channelConfig?.replies === false) return null;
- // The wrapper ensures a key variable is set and the component recreates on thread switch
- return ;
+ // 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
+
+ );
};
+const selector = (nextValue: ThreadState) =>
+ [
+ nextValue.replies,
+ nextValue.pagination.isLoadingPrev,
+ nextValue.pagination.isLoadingNext,
+ nextValue.parentMessage,
+ ] as const;
+
const ThreadInner = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
V extends CustomTrigger = CustomTrigger
@@ -86,11 +100,15 @@ const ThreadInner = <
virtualized,
} = props;
+ const threadInstance = useThreadContext();
+ const [latestReplies, isLoadingPrev, isLoadingNext, parentMessage] =
+ useStateStore(threadInstance?.state, selector) ?? [];
+
const {
thread,
threadHasMore,
threadLoadingMore,
- threadMessages,
+ threadMessages = [],
threadSuppressAutoscroll,
} = useChannelStateContext('Thread');
const { closeThread, loadMoreThread } = useChannelActionContext('Thread');
@@ -118,9 +136,35 @@ const ThreadInner = <
loadMoreThread();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- if (!thread) return null;
+ }, [thread, loadMoreThread]);
+
+ const threadProps: Pick<
+ VirtualizedMessageListProps,
+ | 'hasMoreNewer'
+ | 'loadMoreNewer'
+ | 'loadingMoreNewer'
+ | 'hasMore'
+ | 'loadMore'
+ | 'loadingMore'
+ | 'messages'
+ > = threadInstance
+ ? {
+ loadingMore: isLoadingPrev,
+ loadingMoreNewer: isLoadingNext,
+ loadMore: threadInstance.loadPrevPage,
+ loadMoreNewer: threadInstance.loadNextPage,
+ messages: latestReplies,
+ }
+ : {
+ hasMore: threadHasMore,
+ loadingMore: threadLoadingMore,
+ loadMore: loadMoreThread,
+ messages: threadMessages,
+ };
+
+ const messageAsThread = thread ?? parentMessage;
+
+ if (!messageAsThread) return null;
const threadClass =
customClasses?.thread ||
@@ -130,8 +174,8 @@ const ThreadInner = <
const head = (
@@ -139,24 +183,21 @@ const ThreadInner = <
return (