stream-chat-react-native-core 5.38.1 → 5.39.0-beta.2

package/src/components/Channel/Channel.tsx

@@ -18,6 +18,7 @@ import {
   StreamChat,
   Event as StreamEvent,
   Message as StreamMessage,
+  Thread,
 } from 'stream-chat';
 
 import { useCreateChannelContext } from './hooks/useCreateChannelContext';
@@ -60,7 +61,11 @@ import {
   SuggestionsProvider,
 } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { ThreadContextValue, ThreadProvider } from '../../contexts/threadContext/ThreadContext';
+import {
+  ThreadContextValue,
+  ThreadProvider,
+  ThreadType,
+} from '../../contexts/threadContext/ThreadContext';
 import {
   TranslationContextValue,
   useTranslationContext,
@@ -326,10 +331,9 @@ export type ChannelPropsWithContext<
       | 'VideoThumbnail'
     >
   > &
-  Partial<
-    Pick<ThreadContextValue<StreamChatGenerics>, 'allowThreadMessagesInChannel' | 'thread'>
-  > & {
+  Partial<Pick<ThreadContextValue<StreamChatGenerics>, 'allowThreadMessagesInChannel'>> & {
     shouldSyncChannel: boolean;
+    thread: ThreadType<StreamChatGenerics>;
     /**
      * Additional props passed to keyboard avoiding view
      */
@@ -585,7 +589,7 @@ const ChannelWithContext = <
     StickyHeader = StickyHeaderDefault,
     supportedReactions = reactionData,
     t,
-    thread: threadProps,
+    thread: threadFromProps,
     threadList,
     threadMessages,
     typing,
@@ -598,6 +602,8 @@ const ChannelWithContext = <
     watchers,
   } = props;
 
+  const { thread: threadProps, threadInstance } = threadFromProps;
+
   const {
     theme: {
       channel: { selectChannel },
@@ -616,9 +622,7 @@ const ChannelWithContext = <
   const [quotedMessage, setQuotedMessage] = useState<boolean | MessageType<StreamChatGenerics>>(
     false,
   );
-  const [thread, setThread] = useState<ThreadContextValue<StreamChatGenerics>['thread']>(
-    threadProps || null,
-  );
+  const [thread, setThread] = useState<MessageType<StreamChatGenerics> | null>(threadProps || null);
   const [threadHasMore, setThreadHasMore] = useState(true);
   const [threadLoadingMore, setThreadLoadingMore] = useState(false);
 
@@ -830,7 +834,7 @@ const ChannelWithContext = <
             setThreadMessages(updatedThreadMessages);
           }
 
-          if (channel && thread?.id && event.message?.id === thread.id) {
+          if (channel && thread?.id && event.message?.id === thread.id && !threadInstance) {
             const updatedThread = channel.state.formatMessage(event.message);
             setThread(updatedThread);
           }
@@ -1219,7 +1223,7 @@ const ChannelWithContext = <
       loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
       const { messages } = await channel.getMessagesById([parentID]);
       const [threadMessage] = messages;
-      if (threadMessage) {
+      if (threadMessage && !threadInstance) {
         const formattedMessage = channel.state.formatMessage(threadMessage);
         setThread(formattedMessage);
       }
@@ -1711,11 +1715,15 @@ const ChannelWithContext = <
         } else {
           updateMessage(messageResponse.message);
         }
+
+        threadInstance?.upsertReplyLocally?.({ message: messageResponse.message });
       }
     } catch (err) {
       console.log(err);
       message.status = MessageStatusTypes.FAILED;
-      updateMessage({ ...message, cid: channel.cid });
+      const updatedMessage = { ...message, cid: channel.cid };
+      updateMessage(updatedMessage);
+      threadInstance?.upsertReplyLocally?.({ message: updatedMessage });
 
       if (enableOfflineSupport) {
         dbApi.updateMessage({
@@ -1743,6 +1751,7 @@ const ChannelWithContext = <
       commands: [],
       messageInput: '',
     });
+    threadInstance?.upsertReplyLocally?.({ message: messagePreview });
 
     if (enableOfflineSupport) {
       // While sending a message, we add the message to local db with failed status, so that
@@ -2004,7 +2013,7 @@ const ChannelWithContext = <
 
     setMessages(channel.state.messages);
 
-    await DBSyncManager.queueTask<StreamChatGenerics>({
+    const sendReactionResponse = await DBSyncManager.queueTask<StreamChatGenerics>({
       client,
       task: {
         channelId: channel.id,
@@ -2014,6 +2023,9 @@ const ChannelWithContext = <
         type: 'send-reaction',
       },
     });
+    if (sendReactionResponse?.message) {
+      threadInstance?.upsertReplyLocally?.({ message: sendReactionResponse.message });
+    }
   };
 
   const deleteMessage: MessagesContextValue<StreamChatGenerics>['deleteMessage'] = async (
@@ -2036,12 +2048,15 @@ const ChannelWithContext = <
       DBSyncManager.dropPendingTasks({ messageId: message.id });
       removeMessage(message);
     } else {
-      updateMessage({
+      const updatedMessage = {
         ...message,
         cid: channel.cid,
         deleted_at: new Date().toISOString(),
         type: 'deleted',
-      });
+      };
+      updateMessage(updatedMessage);
+
+      threadInstance?.upsertReplyLocally({ message: updatedMessage });
 
       const data = await DBSyncManager.queueTask<StreamChatGenerics>({
         client,
@@ -2101,12 +2116,18 @@ const ChannelWithContext = <
    */
   const openThread: ThreadContextValue<StreamChatGenerics>['openThread'] = useCallback(
     (message) => {
-      const newThreadMessages = message?.id ? channel?.state?.threads[message.id] || [] : [];
       setThread(message);
-      setThreadMessages(newThreadMessages);
+
+      if (channel.initialized) {
+        channel.markRead({ thread_id: message.id });
+      }
+      // This was causing inconsistencies within the thread state as well as being responsible
+      // of threads essentially never unloading (due to all of the previous threads + 50 loading
+      // every time we'd run this). It seemingly has no impact (other than a performance boost)
+      // and having it was causing issues with the Threads V2 architecture.
+      // setThreadMessages(newThreadMessages);
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setThread, setThreadMessages],
+    [channel, setThread],
   );
 
   const closeThread: ThreadContextValue<StreamChatGenerics>['closeThread'] = useCallback(() => {
@@ -2407,6 +2428,7 @@ const ChannelWithContext = <
     setThreadLoadingMore,
     thread,
     threadHasMore,
+    threadInstance,
     threadLoadingMore,
     threadMessages,
   });
@@ -2479,7 +2501,18 @@ export const Channel = <
   const { client, enableOfflineSupport } = useChatContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
 
-  const shouldSyncChannel = props.thread?.id ? !!props.threadList : true;
+  const threadFromProps = props?.thread;
+  const threadMessage = (
+    threadFromProps?.threadInstance ? threadFromProps.thread : threadFromProps
+  ) as MessageType<StreamChatGenerics>;
+  const threadInstance = threadFromProps?.threadInstance as Thread;
+
+  const thread: ThreadType<StreamChatGenerics> = {
+    thread: threadMessage,
+    threadInstance,
+  };
+
+  const shouldSyncChannel = threadMessage?.id ? !!props.threadList : true;
 
   const {
     members,
@@ -2498,7 +2531,7 @@ export const Channel = <
     watchers,
   } = useChannelState<StreamChatGenerics>(
     props.channel,
-    props.threadList ? props.thread?.id : undefined,
+    props.threadList ? threadMessage?.id : undefined,
   );
 
   return (
@@ -2521,6 +2554,7 @@ export const Channel = <
         setTyping,
         setWatcherCount,
         setWatchers,
+        thread,
         threadMessages,
         typing,
         watcherCount,

package/src/components/Channel/hooks/useCreateThreadContext.ts

@@ -1,8 +1,16 @@
-import { useMemo } from 'react';
+import { ThreadState } from 'stream-chat';
 
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
+import { useStateStore } from '../../../hooks';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { reduceMessagesToString } from '../../../utils/utils';
+
+const selector = (nextValue: ThreadState) =>
+  [
+    nextValue.replies,
+    nextValue.pagination.isLoadingPrev,
+    nextValue.pagination.isLoadingNext,
+    nextValue.parentMessage,
+  ] as const;
 
 export const useCreateThreadContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -15,38 +23,35 @@ export const useCreateThreadContext = <
   setThreadLoadingMore,
   thread,
   threadHasMore,
+  threadInstance,
   threadLoadingMore,
   threadMessages,
 }: ThreadContextValue<StreamChatGenerics>) => {
-  const threadId = thread?.id;
-  const threadReplyCount = thread?.reply_count;
-  const threadLatestReactions = thread?.latest_reactions;
-  const threadMessagesStr = reduceMessagesToString(threadMessages);
+  const [latestReplies, isLoadingPrev, isLoadingNext] =
+    useStateStore(threadInstance?.state, selector) ?? [];
 
-  const threadContext: ThreadContextValue<StreamChatGenerics> = useMemo(
-    () => ({
-      allowThreadMessagesInChannel,
-      closeThread,
-      loadMoreThread,
-      openThread,
-      reloadThread,
-      setThreadLoadingMore,
-      thread,
-      threadHasMore,
-      threadLoadingMore,
-      threadMessages,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      allowThreadMessagesInChannel,
-      threadHasMore,
-      threadId,
-      threadLoadingMore,
-      threadMessagesStr,
-      threadReplyCount,
-      threadLatestReactions,
-    ],
-  );
+  const contextAdapter = threadInstance
+    ? {
+        loadMoreRecentThread: threadInstance.loadNextPage,
+        loadMoreThread: threadInstance.loadPrevPage,
+        threadInstance,
+        threadLoadingMore: isLoadingPrev,
+        threadLoadingMoreRecent: isLoadingNext,
+        threadMessages: latestReplies ?? [],
+      }
+    : {};
 
-  return threadContext;
+  return {
+    allowThreadMessagesInChannel,
+    closeThread,
+    loadMoreThread,
+    openThread,
+    reloadThread,
+    setThreadLoadingMore,
+    thread,
+    threadHasMore,
+    threadLoadingMore,
+    threadMessages,
+    ...contextAdapter,
+  };
 };

package/src/components/Chat/Chat.tsx

@@ -215,6 +215,16 @@ const ChatWithContext = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userID, enableOfflineSupport]);
 
+  useEffect(() => {
+    if (!client) return;
+
+    client.threads.registerSubscriptions();
+
+    return () => {
+      client.threads.unregisterSubscriptions();
+    };
+  }, [client]);
+
   // In case something went wrong, make sure to also unsubscribe the listener
   // on unmount if it exists to prevent a memory leak.
   useEffect(() => () => DBSyncManager.connectionChangedListener?.unsubscribe(), []);

package/src/components/Indicators/EmptyStateIndicator.tsx

@@ -4,10 +4,10 @@ import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../hooks/useViewport';
-import { ChatIcon, MessageIcon } from '../../icons';
+import { ChatIcon, MessageBubbleEmpty, MessageIcon } from '../../icons';
 
 export type EmptyStateProps = {
-  listType?: 'channel' | 'message' | 'default';
+  listType?: 'channel' | 'message' | 'threads' | 'default';
 };
 
 export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
@@ -55,6 +55,13 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
           </Text>
         </View>
       );
+    case 'threads':
+      return (
+        <View style={[styles.container]}>
+          <MessageBubbleEmpty height={width} pathFill={'#B4BBBA'} width={width} />
+          <Text style={{ color: '#7E828B' }}>{t<string>('No threads here yet')}...</Text>
+        </View>
+      );
     default:
       return <Text style={[{ color: black }, messageContainer]}>No items exist</Text>;
   }

package/src/components/Indicators/LoadingIndicator.tsx

@@ -26,7 +26,7 @@ const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
 };
 
 export type LoadingProps = {
-  listType?: 'channel' | 'message' | 'default';
+  listType?: 'channel' | 'message' | 'threads' | 'default';
   loadingText?: string;
 };
 
@@ -47,6 +47,8 @@ export const LoadingIndicator = (props: LoadingProps) => {
       return <LoadingIndicatorWrapper text={t('Loading channels...')} />;
     case 'message':
       return <LoadingIndicatorWrapper text={t('Loading messages...')} />;
+    case 'threads':
+      return <LoadingIndicatorWrapper text={t('Loading threads...')} />;
     default:
       return <LoadingIndicatorWrapper text={t('Loading...')} />;
   }

package/src/components/Message/hooks/useProcessReactions.ts

@@ -2,6 +2,7 @@ import { ComponentType, useMemo } from 'react';
 
 import { ReactionResponse } from 'stream-chat';
 
+import { useChatContext } from '../../../contexts';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -46,7 +47,15 @@ const isOwnReaction = <
 >(
   reactionType: string,
   ownReactions?: ReactionResponse<StreamChatGenerics>[] | null,
-) => (ownReactions ? ownReactions.some((reaction) => reaction.type === reactionType) : false);
+  latestReactions?: ReactionResponse<StreamChatGenerics>[] | null,
+  userID?: string,
+) =>
+  (ownReactions ? ownReactions.some((reaction) => reaction.type === reactionType) : false) ||
+  (latestReactions
+    ? latestReactions.some(
+        (reaction) => reaction?.user?.id === userID && reaction.type === reactionType,
+      )
+    : false);
 
 const isSupportedReaction = (reactionType: string, supportedReactions: ReactionData[]) =>
   supportedReactions
@@ -76,6 +85,7 @@ export const useProcessReactions = <
   props: UseProcessReactionsParams<StreamChatGenerics>,
 ) => {
   const { supportedReactions: contextSupportedReactions } = useMessagesContext();
+  const { client } = useChatContext<StreamChatGenerics>();
 
   const {
     latest_reactions,
@@ -100,7 +110,12 @@ export const useProcessReactions = <
           Icon: getEmojiByReactionType(reactionType, supportedReactions),
           lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
           latestReactedUserNames,
-          own: isOwnReaction<StreamChatGenerics>(reactionType, own_reactions),
+          own: isOwnReaction<StreamChatGenerics>(
+            reactionType,
+            own_reactions,
+            latest_reactions,
+            client.userID,
+          ),
           type: reactionType,
           unlistedReactedUserCount: count - latestReactedUserNames.length,
         };
@@ -112,6 +127,12 @@ export const useProcessReactions = <
       hasReactions: unsortedReactions.length > 0,
       totalReactionCount: unsortedReactions.reduce((total, { count }) => total + count, 0),
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [reaction_groups, own_reactions?.length, latest_reactions?.length, sortReactions]);
+  }, [
+    client.userID,
+    reaction_groups,
+    own_reactions,
+    latest_reactions,
+    supportedReactions,
+    sortReactions,
+  ]);
 };

package/src/components/MessageList/InlineLoadingMoreRecentThreadIndicator.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+import { useThreadContext } from '../../contexts';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+const styles = StyleSheet.create({
+  activityIndicatorContainer: {
+    padding: 10,
+    width: '100%',
+  },
+});
+
+export type InlineLoadingMoreRecentThreadIndicatorPropsWithContext = {
+  loadingMoreRecent?: boolean;
+};
+
+export const InlineLoadingMoreRecentIndicatorWithContext = ({
+  loadingMoreRecent,
+}: InlineLoadingMoreRecentThreadIndicatorPropsWithContext) => {
+  const { theme } = useTheme();
+
+  const {
+    colors: { accent_blue },
+  } = theme;
+
+  if (!loadingMoreRecent) {
+    return null;
+  }
+
+  return (
+    <View style={styles.activityIndicatorContainer}>
+      <ActivityIndicator color={accent_blue} size='small' />
+    </View>
+  );
+};
+
+const areEqual = (
+  prevProps: InlineLoadingMoreRecentThreadIndicatorPropsWithContext,
+  nextProps: InlineLoadingMoreRecentThreadIndicatorPropsWithContext,
+) => {
+  const { loadingMoreRecent: prevLoadingMoreRecent } = prevProps;
+  const { loadingMoreRecent: nextLoadingMoreRecent } = nextProps;
+
+  const loadingMoreRecentEqual = prevLoadingMoreRecent === nextLoadingMoreRecent;
+  if (!loadingMoreRecentEqual) return false;
+
+  return true;
+};
+
+const MemoizedInlineLoadingMoreRecentIndicator = React.memo(
+  InlineLoadingMoreRecentIndicatorWithContext,
+  areEqual,
+) as typeof InlineLoadingMoreRecentIndicatorWithContext;
+
+export const InlineLoadingMoreRecentThreadIndicator = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() => {
+  const { threadLoadingMoreRecent } = useThreadContext<StreamChatGenerics>();
+
+  return <MemoizedInlineLoadingMoreRecentIndicator loadingMoreRecent={threadLoadingMoreRecent} />;
+};

package/src/components/MessageList/MessageList.tsx

@@ -20,7 +20,7 @@ import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollT
 
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
 import { InlineLoadingMoreRecentIndicator } from './InlineLoadingMoreRecentIndicator';
-import { InlineLoadingMoreThreadIndicator } from './InlineLoadingMoreThreadIndicator';
+import { InlineLoadingMoreRecentThreadIndicator } from './InlineLoadingMoreRecentThreadIndicator';
 import { getLastReceivedMessage } from './utils/getLastReceivedMessage';
 
 import {
@@ -147,7 +147,10 @@ type MessageListPropsWithContext<
     | 'TypingIndicator'
     | 'TypingIndicatorContainer'
   > &
-  Pick<ThreadContextValue<StreamChatGenerics>, 'loadMoreThread' | 'thread'> & {
+  Pick<
+    ThreadContextValue<StreamChatGenerics>,
+    'loadMoreRecentThread' | 'loadMoreThread' | 'thread' | 'threadInstance'
+  > & {
     /**
      * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want
      * to attach some additional props to underlying FlatList, you can add it to following prop.
@@ -221,9 +224,9 @@ const MessageListWithContext = <
 >(
   props: MessageListPropsWithContext<StreamChatGenerics>,
 ) => {
-  const LoadingMoreIndicator = props.threadList
-    ? InlineLoadingMoreThreadIndicator
-    : InlineLoadingMoreIndicator;
+  const LoadingMoreRecentIndicator = props.threadList
+    ? InlineLoadingMoreRecentThreadIndicator
+    : InlineLoadingMoreRecentIndicator;
   const {
     additionalFlatListProps,
     channel,
@@ -234,9 +237,9 @@ const MessageListWithContext = <
     disableTypingIndicator,
     EmptyStateIndicator,
     FlatList,
-    FooterComponent = LoadingMoreIndicator,
+    FooterComponent = InlineLoadingMoreIndicator,
     hasNoMoreRecentMessagesToLoad,
-    HeaderComponent = InlineLoadingMoreRecentIndicator,
+    HeaderComponent = LoadingMoreRecentIndicator,
     hideStickyDateHeader,
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
@@ -249,6 +252,7 @@ const MessageListWithContext = <
     LoadingIndicator,
     loadMore,
     loadMoreRecent,
+    loadMoreRecentThread,
     loadMoreThread,
     markRead,
     Message,
@@ -269,6 +273,7 @@ const MessageListWithContext = <
     StickyHeader,
     targetedMessage,
     thread,
+    threadInstance,
     threadList = false,
     TypingIndicator,
     TypingIndicatorContainer,
@@ -744,7 +749,13 @@ const MessageListWithContext = <
     if (onEndReachedInPromise.current) {
       await onEndReachedInPromise.current;
     }
-    onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
+    onStartReachedInPromise.current = (
+      threadList && !!threadInstance && loadMoreRecentThread
+        ? loadMoreRecentThread({ limit })
+        : loadMoreRecent(limit)
+    )
+      .then(callback)
+      .catch(onError);
   };
 
   /**
@@ -1253,7 +1264,8 @@ export const MessageList = <
   const { hasNoMoreRecentMessagesToLoad, loadMore, loadMoreRecent } =
     usePaginatedMessageListContext<StreamChatGenerics>();
   const { overlay } = useOverlayContext();
-  const { loadMoreThread, thread } = useThreadContext<StreamChatGenerics>();
+  const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } =
+    useThreadContext<StreamChatGenerics>();
 
   return (
     <MessageListWithContext
@@ -1280,6 +1292,7 @@ export const MessageList = <
         LoadingIndicator,
         loadMore,
         loadMoreRecent,
+        loadMoreRecentThread,
         loadMoreThread,
         markRead,
         Message,
@@ -1297,6 +1310,7 @@ export const MessageList = <
         StickyHeader,
         targetedMessage,
         thread,
+        threadInstance,
         threadList,
         TypingIndicator,
         TypingIndicatorContainer,

package/src/components/Thread/Thread.tsx

@@ -23,7 +23,12 @@ type ThreadPropsWithContext<
   Pick<MessagesContextValue<StreamChatGenerics>, 'MessageList'> &
   Pick<
     ThreadContextValue<StreamChatGenerics>,
-    'closeThread' | 'loadMoreThread' | 'parentMessagePreventPress' | 'reloadThread' | 'thread'
+    | 'closeThread'
+    | 'loadMoreThread'
+    | 'parentMessagePreventPress'
+    | 'reloadThread'
+    | 'thread'
+    | 'threadInstance'
   > & {
     /**
      * Additional props for underlying MessageInput component.
@@ -70,9 +75,13 @@ const ThreadWithContext = <
     onThreadDismount,
     parentMessagePreventPress = true,
     thread,
+    threadInstance,
   } = props;
 
   useEffect(() => {
+    if (threadInstance?.activate) {
+      threadInstance.activate();
+    }
     const loadMoreThreadAsync = async () => {
       await loadMoreThread();
     };
@@ -80,21 +89,20 @@ const ThreadWithContext = <
     if (thread?.id && thread.reply_count) {
       loadMoreThreadAsync();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
-  useEffect(
-    () => () => {
+    return () => {
+      if (threadInstance?.deactivate) {
+        threadInstance.deactivate();
+      }
       if (closeThreadOnDismount) {
         closeThread();
       }
       if (onThreadDismount) {
         onThreadDismount();
       }
-    },
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
+  }, []);
 
   if (!thread) return null;
 
@@ -137,7 +145,7 @@ export const Thread = <
   const { client } = useChatContext<StreamChatGenerics>();
   const { threadList } = useChannelContext<StreamChatGenerics>();
   const { MessageList } = useMessagesContext<StreamChatGenerics>();
-  const { closeThread, loadMoreThread, reloadThread, thread } =
+  const { closeThread, loadMoreThread, reloadThread, thread, threadInstance } =
     useThreadContext<StreamChatGenerics>();
 
   if (thread?.id && !threadList) {
@@ -155,6 +163,7 @@ export const Thread = <
         MessageList,
         reloadThread,
         thread,
+        threadInstance,
       }}
       {...props}
     />