stream-chat-react-native-core 9.10.2-beta.1 → 10.0.0-rc.2

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

@@ -1,47 +1,28 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback } from 'react';
 
-import { Event, LocalMessage, UserResponse } from 'stream-chat';
+import type { LocalMessage, UserResponse } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-import { useStableCallback } from '../../../hooks';
+import { useStateStore } from '../../../hooks/useStateStore';
+
+const EMPTY_READERS: UserResponse[] = [];
 
 export const useMessageReadData = ({ message }: { message?: LocalMessage }) => {
   const { channel } = useChannelContext();
-  const { client } = useChatContext();
-
-  const messageIdRef = useRef<string>(message?.id);
-
-  const calculate = useStableCallback(() => {
-    if (!message?.created_at) {
-      return [];
-    }
-    const messageRef = {
-      msgId: message.id,
-      timestampMs: new Date(message.created_at).getTime(),
-    };
-
-    return channel.messageReceiptsTracker.readersForMessage(messageRef);
-  });
-
-  const [readBy, setReadBy] = useState<UserResponse[]>(() => calculate());
-
-  if (!!messageIdRef.current && !!message?.id && messageIdRef.current !== message.id) {
-    setReadBy(calculate());
-    messageIdRef.current = message.id;
-  }
-
-  useEffect(() => {
-    const { unsubscribe } = channel.on('message.read', (event: Event) => {
-      /**
-       * An optimization to only re-calculate if the event is received by a different user.
-       */
-      if (event.user?.id !== client.user?.id) {
-        setReadBy(calculate());
-      }
-    });
-    return unsubscribe;
-  }, [channel, calculate, client.user?.id]);
+  const msgId = message?.id;
+  const createdAt = message?.created_at;
+
+  const selector = useCallback(
+    () => ({
+      readBy:
+        msgId && typeof createdAt === 'number' && Number.isFinite(createdAt)
+          ? channel.messageReceiptsTracker.readersForMessage({ msgId, timestamp: createdAt })
+          : EMPTY_READERS,
+    }),
+    [channel, createdAt, msgId],
+  );
+
+  const { readBy } = useStateStore(channel.messageReceiptsTracker.snapshotStore, selector);
 
   return readBy;
 };

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

@@ -1,6 +1,6 @@
 import { ComponentType, useMemo } from 'react';
 
-import { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
+import { convertTimestampToDate, ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts';
 import {
@@ -23,11 +23,11 @@ export type ReactionSummary = {
 export type ReactionsComparator = (a: ReactionSummary, b: ReactionSummary) => number;
 
 export type MessageReactionsData = {
-  /** An array of the reaction objects to display in the list */
+  /** Reactions to display in the list. */
   latest_reactions?: ReactionResponse[];
-  /** An array of the own reaction objects to distinguish own reactions visually */
+  /** Own reactions, to tell them apart visually. */
   own_reactions?: ReactionResponse[] | null;
-  /** An object containing summary for each reaction type on a message */
+  /** Summary of each reaction type on the message. */
   reaction_groups?: Record<string, ReactionGroupResponse> | null;
 };
 
@@ -77,7 +77,11 @@ const getLatestReactedUserNames = (reactionType: string, latestReactions?: React
     : [];
 
 /**
- * Custom hook to process reactions data from message and return a list of reactions with additional info.
+ * Turns the reaction data of a message into a sorted list of reactions with extra info.
+ *
+ * @param props The reaction data of the message, plus optional `sortReactions` and
+ * `supportedReactions` overrides.
+ * @returns `existingReactions` (sorted), `hasReactions` and `totalReactionCount`.
  */
 export const useProcessReactions = (props: UseProcessReactionsParams) => {
   const { supportedReactions: contextSupportedReactions } = useMessagesContext();
@@ -105,9 +109,9 @@ export const useProcessReactions = (props: UseProcessReactionsParams) => {
 
         return {
           count,
-          firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
+          firstReactionAt: convertTimestampToDate(first_reaction_at) ?? null,
           Icon: getEmojiByReactionType(reactionType, supportedReactions),
-          lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
+          lastReactionAt: convertTimestampToDate(last_reaction_at) ?? null,
           latestReactedUserNames,
           own: isOwnReaction(reactionType, own_reactions, latest_reactions, client.userID),
           type: reactionType,

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

@@ -11,12 +11,13 @@ const DEFAULT_LETTER_INTERVAL = 0;
 const DEFAULT_RENDERING_LETTER_COUNT = 2;
 
 /**
- * A hook that returns text in a streamed, typewriter fashion. The speed of streaming is
- * configurable.
- * @param {number} [letterInterval=0] - The timeout between each typing animation in milliseconds.
- * @param {number} [renderingLetterCount=2] - The number of letters to be rendered each time we update.
- * @param {string} text - The text that we want to render in a typewriter fashion.
- * @returns {{ streamedMessageText: string }} - A substring of the text property, up until we've finished rendering the typewriter animation.
+ * Reveals `text` in a typewriter fashion. It starts from the full initial text, so only text added
+ * later is animated. An unclosed code fence is closed while streaming.
+ *
+ * @param params.letterInterval Delay between typing steps in milliseconds. Defaults to 0.
+ * @param params.renderingLetterCount Number of letters revealed per step. Defaults to 2.
+ * @param params.text The text to reveal.
+ * @returns `streamedMessageText`, the part of `text` revealed so far.
  */
 export const useStreamingMessage = ({
   letterInterval = DEFAULT_LETTER_INTERVAL,

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

@@ -1,15 +1,46 @@
-import { UserResponse } from 'stream-chat';
+import { useCallback } from 'react';
+
+import type { UserMuteResponse, UserResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts';
-import { useMutedUsers } from '../../ChannelList/hooks/useMutedUsers';
+import { useStateStore } from '../../../hooks/useStateStore';
+
+/**
+ * Whether `currentUserId` has muted `userId`, according to the given mute list.
+ *
+ * @param mutedUsers The mute list to search.
+ * @param currentUserId ID of the user who may have muted.
+ * @param userId ID of the user who may be muted.
+ * @returns Whether `currentUserId` has muted `userId`.
+ */
+export const isUserMuted = (
+  mutedUsers: UserMuteResponse[],
+  currentUserId: string | undefined,
+  userId: string | undefined,
+) =>
+  !!userId &&
+  mutedUsers.some((mute) => mute.user?.id === currentUserId && mute.target?.id === userId);
 
+/**
+ * Whether the current user has muted `user`.
+ *
+ * Selects that one answer from `client.mutedUsersStore`, so muting or unmuting somebody else does
+ * not re-render the caller.
+ *
+ * @param user The user to check.
+ * @returns Whether the current user has muted `user`.
+ */
 export const useUserMuteActive = (user: UserResponse | null | undefined) => {
   const { client } = useChatContext();
-  const mutedUsers = useMutedUsers();
+  const currentUserId = client?.userID;
+  const userId = user?.id;
 
-  if (!user) {
-    return false;
-  }
+  const selector = useCallback(
+    (state: { mutedUsers: UserMuteResponse[] }) => ({
+      isMuted: isUserMuted(state.mutedUsers, currentUserId, userId),
+    }),
+    [currentUserId, userId],
+  );
 
-  return !!mutedUsers.find((mute) => mute.user.id === client.userID && user.id === mute.target.id);
+  return useStateStore(client?.mutedUsersStore, selector)?.isMuted ?? false;
 };

package/src/components/Message/utils/measureInWindow.ts

@@ -10,29 +10,30 @@ import { isRN86OrGreater } from '../../../utils/react-native-constants';
 type MeasuredRect = { x: number; y: number; w: number; h: number };
 
 /**
- * On Android, `measureInWindow` historically did not account for the top inset, so we added it
- * ourselves. React Native 0.86 fixed this upstream as part of its edge-to-edge rework and now
- * returns topInset corrected window coordinates. On >= 0.86 adding it again double counts the
- * inset and offsets every measured view down by `insets.top`, so we only compensate on Android
- * running React Native below 0.86.
+ * Top inset to add to a measured `y`. Android `measureInWindow` excludes the top inset below React
+ * Native 0.86; from 0.86 the coordinates include it, and adding it again would shift every measured
+ * view down by `insets.top`.
  */
 const androidTopInsetCompensation = (insets: EdgeInsets): number =>
   Platform.OS === 'android' && !isRN86OrGreater ? insets.top : 0;
 
 /**
- * How many screen lengths away from the origin a measured coordinate may fall before we treat it as
- * bogus. Real targets (a view currently on screen) always measure well within one screen and the failure
- * mode we guard against is off by tens of screens, so a generous multiplier cleanly separates the two
- * with no risk of false positives on legitimate values.
+ * Screen lengths from the origin beyond which a measured coordinate is treated as bogus. On-screen
+ * targets measure within one screen and the failure is off by tens of screens, so 2 separates them.
  */
 const SCREEN_BOUND_MULTIPLIER = 2;
 
 /**
- * `measureInWindow` can return wildly out of bounds coordinates on Android when the native window has
- * been forced edge-to-edge behind React Native's back (i.e a library setting `FLAG_LAYOUT_NO_LIMITS`,
- * as `react-native-system-navigation-bar` does for a transparent nav bar) while RN's own edge-to-edge
- * (`edgeToEdgeEnabled`) is off. In that state the window relative measurement is corrupted and would
- * return a position of the View far offscreen.
+ * Whether a measured rect is unusable: non-finite values, a non-positive size, or coordinates more
+ * than `SCREEN_BOUND_MULTIPLIER` screens from the origin. On Android, `measureInWindow` returns far
+ * out of bounds coordinates when a library forces the window edge-to-edge (such as setting
+ * `FLAG_LAYOUT_NO_LIMITS` for a transparent nav bar) while `edgeToEdgeEnabled` is off.
+ *
+ * @param x Measured x coordinate.
+ * @param y Measured y coordinate.
+ * @param w Measured width.
+ * @param h Measured height.
+ * @returns Whether the measurement should be discarded.
  */
 export const isMeasuredRectBogus = (x: number, y: number, w: number, h: number): boolean => {
   if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(w) || !Number.isFinite(h)) {
@@ -43,7 +44,7 @@ export const isMeasuredRectBogus = (x: number, y: number, w: number, h: number):
   }
   const { width, height } = Dimensions.get('screen');
   if (width <= 0 || height <= 0) {
-    // can't reason about bounds, trust the measurement
+    // Without a screen size there is nothing to compare against.
     return false;
   }
   return (
@@ -69,10 +70,9 @@ export const measureInWindow = (
         return;
       }
 
-      // If `measureInWindow` returned an out of bounds rect, fallback to `measure()`, whose
-      // `pageX`/`pageY` are relative to the app root and are the same coordinate space as the window.
-      // They will stays correct when the window frame has been mutated out from under
-      // React Native.
+      // Falls back to `measure()` for a bogus rect: its `pageX`/`pageY` are relative to the app
+      // root, the same space as the window, and stay correct when the window frame was mutated
+      // behind React Native's back.
       if (typeof handle.measure !== 'function') {
         resolve({ h, w, x, y: y + androidTopInsetCompensation(insets) });
         return;

package/src/components/Message/utils/messageActions.ts

@@ -1,10 +1,10 @@
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
-import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import type { OwnCapabilitiesContextValue } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { isClipboardAvailable } from '../../../native';
 
 import { FileTypes } from '../../../types/types';
 import type { MessageActionType } from '../../MessageMenu/MessageActionListItem';
+import type { MessageOperations } from '../hooks/useMessageOperations';
 
 export type MessageActionsParams = {
   banUser: MessageActionType;
@@ -24,10 +24,9 @@ export type MessageActionsParams = {
   threadReply: MessageActionType;
   unpinMessage: MessageActionType;
   blockUser: MessageActionType;
-  // Optional Actions
   deleteForMeMessage?: MessageActionType;
 } & Pick<MessageContextValue, 'message' | 'isMyMessage'> &
-  Pick<MessagesContextValue, 'updateMessage'>;
+  Pick<MessageOperations, 'updateMessage'>;
 
 export type MessageActionsProp = (param: MessageActionsParams) => MessageActionType[];
 

package/src/components/MessageInput/MessageComposer.tsx

@@ -10,7 +10,12 @@ import Animated, {
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { type UserResponse } from 'stream-chat';
+import {
+  type ChannelDataState,
+  type ChannelWatchState,
+  type MembersState,
+  type UserResponse,
+} from 'stream-chat';
 
 import { MicPositionProvider } from './contexts/MicPositionContext';
 
@@ -18,12 +23,7 @@ import { audioRecorderSelector } from './utils/audioRecorderSelectors';
 
 import { useScreenReaderMountFocus } from '../../a11y';
 
-import {
-  ChatContextValue,
-  useAttachmentPickerContext,
-  useChatContext,
-  useOwnCapabilitiesContext,
-} from '../../contexts';
+import { useAttachmentPickerContext, useOwnCapabilitiesContext } from '../../contexts';
 import {
   ChannelContextValue,
   useChannelContext,
@@ -53,6 +53,7 @@ import { MessageInputHeightState } from '../../state-store/message-input-height-
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { type TextInputOverrideComponent } from '../AutoCompleteInput/AutoCompleteInput';
+import { useSettledWSConnectionHealth } from '../Chat/hooks/useWSConnectionState';
 import { PollModal } from '../Poll/components/PollModal';
 import { CreatePoll } from '../Poll/CreatePollContent';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
@@ -137,9 +138,13 @@ const useStyles = () => {
   }, [semantics]);
 };
 
-type MessageComposerPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
-  Pick<ChannelContextValue, 'channel' | 'members' | 'watchers'> &
-  Pick<
+type MessageComposerPropsWithContext = { isOnline: boolean } & Pick<
+  ChannelContextValue,
+  'channel'
+> & {
+    members?: MembersState['members'];
+    watchers?: ChannelWatchState['watchers'];
+  } & Pick<
     MessageInputContextValue,
     | 'audioRecorderManager'
     | 'additionalTextInputProps'
@@ -165,7 +170,6 @@ type MessageComposerPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
   Pick<AudioRecorderManagerState, 'micLocked'> & {
     editing: boolean;
     isKeyboardVisible: boolean;
-    threadList?: boolean;
     TextInputComponent?: TextInputOverrideComponent;
     isRecordingStateIdle?: boolean;
     recordingStatus?: string;
@@ -175,11 +179,17 @@ const messageInputHeightStoreSelector = (state: MessageInputHeightState) => ({
   height: state.height,
 });
 
+// Capabilities arrive with the channel's data, from the server or the offline database.
+const capabilitiesKnownSelector = (state: ChannelDataState) => ({
+  capabilitiesKnown: Array.isArray(state.data?.own_capabilities),
+});
+
 const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
   const {
     additionalTextInputProps,
     asyncMessagesLockDistance,
     asyncMessagesSlideToCancelDistance,
+    channel,
     closeAttachmentPicker,
     closePollCreationDialog,
     createPollOptionGap,
@@ -233,7 +243,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     },
   } = useTheme();
 
-  // Close the attachment picker state when the component unmounts
+  // Closes the attachment picker on unmount.
   useEffect(
     () => () => {
       closeAttachmentPicker();
@@ -242,7 +252,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
   );
 
   /**
-   * Effect to get the draft data for legacy thread composer and set it to message composer.
+   * Loads the draft of the legacy thread composer into the message composer.
    * TODO: This can be removed once we remove legacy thread composer.
    */
   useEffect(() => {
@@ -254,8 +264,9 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
 
   const getMembers = () => {
     const result: UserResponse[] = [];
-    if (members && Object.values(members).length) {
-      Object.values(members).forEach((member) => {
+    const channelMembers = members ?? channel.state.getLatestValue().members;
+    if (channelMembers && Object.values(channelMembers).length) {
+      Object.values(channelMembers).forEach((member) => {
         if (member.user) {
           result.push(member.user);
         }
@@ -268,7 +279,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
   const getUsers = () => {
     const users = [...getMembers(), ...getWatchers()];
 
-    // make sure we don't list users twice
+    // Deduplicate by user ID.
     const uniqueUsers: { [key: string]: UserResponse } = {};
     for (const user of users) {
       if (user && !uniqueUsers[user.id]) {
@@ -282,14 +293,15 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
 
   const getWatchers = () => {
     const result: UserResponse[] = [];
-    if (watchers && Object.values(watchers).length) {
-      result.push(...Object.values(watchers));
+    const channelWatchers = watchers ?? channel.state.getLatestValue().watchers;
+    if (channelWatchers && Object.values(channelWatchers).length) {
+      result.push(...Object.values(channelWatchers));
     }
 
     return result;
   };
 
-  // immediately focus the screen reader to the input on mount if a11y is enabled.
+  // Moves screen reader focus to the input on mount when a screen reader is enabled.
   useScreenReaderMountFocus(inputBoxRef);
 
   const isFocused = inputBoxRef.current?.isFocused();
@@ -374,7 +386,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
                       borderTopWidth: 1,
                       backgroundColor: semantics.backgroundCoreElevation1,
                       borderTopColor: semantics.borderCoreSubtle,
-                      // paddingBottom: BOTTOM_OFFSET,
                       paddingBottom:
                         selectedPicker && !isKeyboardVisible
                           ? attachmentPickerBottomSheetHeight - bottomInset + BOTTOM_OFFSET
@@ -599,20 +610,13 @@ const MemoizedMessageComposer = React.memo(
 
 export type MessageComposerProps = Partial<MessageComposerPropsWithContext>;
 
-/**
- * UI Component for message composer
- * It's a consumer of
- * [Channel Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/channel-context/),
- * [Chat Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/chat-context/),
- * [MessageInput Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/message-input-context/),
- * [Suggestions Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/suggestions-context/), and
- * [Translation Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/translation-context/)
- */
+/** Message composer UI. */
 export const MessageComposer = (props: MessageComposerProps) => {
-  const { isOnline } = useChatContext();
+  const isOnline = useSettledWSConnectionHealth();
   const ownCapabilities = useOwnCapabilitiesContext();
 
-  const { channel, members, watchers } = useChannelContext();
+  const { channel } = useChannelContext();
+  const { capabilitiesKnown } = useStateStore(channel.state, capabilitiesKnownSelector);
 
   const {
     audioRecorderManager,
@@ -646,11 +650,14 @@ export const MessageComposer = (props: MessageComposerProps) => {
 
   const { t } = useTranslationContext();
 
-  /**
-   * Disable the message input if the channel is frozen, or the user doesn't have the capability to send a message.
-   * Enable it in frozen mode, if it the input has editing state.
-   */
-  if (!ownCapabilities.sendMessage && !editing && SendMessageDisallowedIndicator) {
+  // Without the `sendMessage` capability (such as in a frozen channel) only the disallowed
+  // indicator is rendered, unless a message is being edited.
+  if (
+    capabilitiesKnown &&
+    !ownCapabilities.sendMessage &&
+    !editing &&
+    SendMessageDisallowedIndicator
+  ) {
     return <SendMessageDisallowedIndicator />;
   }
 
@@ -677,7 +684,6 @@ export const MessageComposer = (props: MessageComposerProps) => {
         inputBoxRef,
         isKeyboardVisible,
         isOnline,
-        members,
         messageInputFloating,
         messageInputHeightStore,
         openPollCreationDialog,
@@ -685,7 +691,6 @@ export const MessageComposer = (props: MessageComposerProps) => {
         showPollCreationDialog,
         t,
         uploadNewFile,
-        watchers,
       }}
       {...props}
     />

package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx

@@ -12,7 +12,9 @@ export const SendMessageDisallowedIndicator = () => {
 
   return (
     <View style={styles.container} testID='send-message-disallowed-indicator'>
-      <Text style={styles.text}>{t("You can't send messages in this channel")}</Text>
+      <Text style={styles.text}>
+        {t('messageInput.sendMessageDisallowed.text', "You can't send messages in this channel")}
+      </Text>
     </View>
   );
 };

package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx

@@ -5,10 +5,6 @@ import Animated, { LinearTransition } from 'react-native-reanimated';
 
 import { MessageComposerState } from 'stream-chat';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../contexts/channelContext/ChannelContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
@@ -26,16 +22,16 @@ const stateSelector = (state: MessageComposerState) => ({
 
 export type ShowThreadMessageInChannelButtonWithContextProps = Pick<
   ThreadContextValue,
-  'allowThreadMessagesInChannel'
+  'allowThreadMessagesInChannel' | 'thread'
 > &
-  Pick<TranslationContextValue, 't'> & { threadList?: ChannelContextValue['threadList'] };
+  Pick<TranslationContextValue, 't'>;
 
 export const ShowThreadMessageInChannelButtonWithContext = (
   props: ShowThreadMessageInChannelButtonWithContextProps,
 ) => {
   const styles = useStyles();
   const { icons } = useComponentsContext();
-  const { allowThreadMessagesInChannel, t, threadList } = props;
+  const { allowThreadMessagesInChannel, t, thread } = props;
   const messageComposer = useMessageComposer();
   const { showReplyInChannel } = useStateStore(messageComposer.state, stateSelector);
 
@@ -59,7 +55,7 @@ export const ShowThreadMessageInChannelButtonWithContext = (
     messageComposer.toggleShowReplyInChannel();
   }, [messageComposer]);
 
-  if (!threadList || !allowThreadMessagesInChannel) {
+  if (!thread || !allowThreadMessagesInChannel) {
     return null;
   }
 
@@ -92,7 +88,9 @@ export const ShowThreadMessageInChannelButtonWithContext = (
               />
             )}
           </View>
-          <Text style={[styles.text, text]}>{t('Also send to channel')}</Text>
+          <Text style={[styles.text, text]}>
+            {t('messageInput.alsoSendToChannel.label', 'Also send to channel')}
+          </Text>
         </View>
       </Pressable>
     </Animated.View>
@@ -106,12 +104,12 @@ const areEqual = (
   const {
     allowThreadMessagesInChannel: prevAllowThreadMessagesInChannel,
     t: prevT,
-    threadList: prevThreadList,
+    thread: prevThread,
   } = prevProps;
   const {
     allowThreadMessagesInChannel: nextAllowThreadMessagesInChannel,
     t: nextT,
-    threadList: nextThreadList,
+    thread: nextThread,
   } = nextProps;
 
   const tEqual = prevT === nextT;
@@ -119,8 +117,8 @@ const areEqual = (
     return false;
   }
 
-  const threadListEqual = prevThreadList === nextThreadList;
-  if (!threadListEqual) {
+  const threadEqual = prevThread === nextThread;
+  if (!threadEqual) {
     return false;
   }
 
@@ -143,15 +141,14 @@ export type ShowThreadMessageInChannelButtonProps =
 
 export const ShowThreadMessageInChannelButton = (props: ShowThreadMessageInChannelButtonProps) => {
   const { t } = useTranslationContext();
-  const { allowThreadMessagesInChannel } = useThreadContext();
-  const { threadList } = useChannelContext();
+  const { allowThreadMessagesInChannel, thread } = useThreadContext();
 
   return (
     <MemoizedShowThreadMessageInChannelButton
       {...{
         allowThreadMessagesInChannel,
         t,
-        threadList,
+        thread,
       }}
       {...props}
     />

package/src/components/MessageInput/StopMessageStreamingButton.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
 export type StopMessageStreamingButtonProps = {
-  /** Function that opens attachment options bottom sheet */
+  /** Called when the button is pressed. */
   onPress?: () => void;
 };
 

package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.tsx

@@ -288,6 +288,9 @@ describe('AttachmentUploadPreviewList', () => {
         }),
         generateVideoAttachment({
           localMetadata: {
+            file: {
+              uri: 'file://video-attachment.mp4',
+            },
             id: 'video-attachment',
             uploadState: FileState.FINISHED,
           },
@@ -320,6 +323,9 @@ describe('AttachmentUploadPreviewList', () => {
         }),
         generateVideoAttachment({
           localMetadata: {
+            file: {
+              uri: 'file://video-attachment.mp4',
+            },
             id: 'video-attachment',
             uploadState: FileState.FAILED,
           },
@@ -361,6 +367,9 @@ describe('AttachmentUploadPreviewList', () => {
         }),
         generateVideoAttachment({
           localMetadata: {
+            file: {
+              uri: 'file://video-attachment.mp4',
+            },
             id: 'video-attachment',
             uploadState: FileState.BLOCKED,
           },