diff --git a/lib/shared/thread-utils.js b/lib/shared/thread-utils.js
index 91e81b07b..f77253b14 100644
--- a/lib/shared/thread-utils.js
+++ b/lib/shared/thread-utils.js
@@ -1,1038 +1,1036 @@
 // @flow
 
 import invariant from 'invariant';
 import _find from 'lodash/fp/find';
 import * as React from 'react';
 import { type ParserRules } from 'simple-markdown';
 import tinycolor from 'tinycolor2';
 
 import {
   fetchMostRecentMessagesActionTypes,
   fetchMostRecentMessages,
 } from '../actions/message-actions';
 import { newThreadActionTypes } from '../actions/thread-actions';
 import {
   permissionLookup,
   getAllThreadPermissions,
   makePermissionsBlob,
 } from '../permissions/thread-permissions';
 import type {
   ChatThreadItem,
   ChatMessageInfoItem,
 } from '../selectors/chat-selectors';
 import {
   threadInfoSelector,
   pendingToRealizedThreadIDsSelector,
 } from '../selectors/thread-selectors';
 import type {
   RobotextMessageInfo,
   ComposableMessageInfo,
 } from '../types/message-types';
 import { userRelationshipStatus } from '../types/relationship-types';
 import {
   type RawThreadInfo,
   type ThreadInfo,
   type ThreadPermission,
   type MemberInfo,
   type ServerThreadInfo,
   type RelativeMemberInfo,
   type ThreadCurrentUserInfo,
   type RoleInfo,
   type ServerMemberInfo,
   type ThreadPermissionsInfo,
   type ThreadType,
   threadTypes,
   threadPermissions,
 } from '../types/thread-types';
 import type { NewThreadRequest, NewThreadResult } from '../types/thread-types';
 import { type UpdateInfo, updateTypes } from '../types/update-types';
 import type {
   GlobalAccountUserInfo,
   UserInfos,
   UserInfo,
   AccountUserInfo,
 } from '../types/user-types';
 import { useDispatchActionPromise, useServerCall } from '../utils/action-utils';
 import type { DispatchActionPromise } from '../utils/action-utils';
 import { useSelector } from '../utils/redux-utils';
 import { firstLine } from '../utils/string-utils';
 import { pluralize, trimText } from '../utils/text-utils';
 import { getMessageTitle } from './message-utils';
 import { relationshipBlockedInEitherDirection } from './relationship-utils';
 import threadWatcher from './thread-watcher';
 
 function colorIsDark(color: string) {
   return tinycolor(`#${color}`).isDark();
 }
 
 // Randomly distributed in RGB-space
 const hexNumerals = '0123456789abcdef';
 function generateRandomColor() {
   let color = '';
   for (let i = 0; i < 6; i++) {
     color += hexNumerals[Math.floor(Math.random() * 16)];
   }
   return color;
 }
 
 function generatePendingThreadColor(userIDs: $ReadOnlyArray<string>) {
   const ids = [...userIDs].sort().join('#');
 
   let hash = 0;
   for (let i = 0; i < ids.length; i++) {
     hash = 1009 * hash + ids.charCodeAt(i) * 83;
     hash %= 1000000007;
   }
   const hashString = hash.toString(16);
   return hashString.substring(hashString.length - 6).padStart(6, '8');
 }
 
 function threadHasPermission(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
   permission: ThreadPermission,
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   invariant(
     !permissionsDisabledByBlock.has(permission) || threadInfo?.uiName,
     `${permission} can be disabled by a block, but threadHasPermission can't ` +
       'check for a block on RawThreadInfo. Please pass in ThreadInfo instead!',
   );
   if (!threadInfo.currentUser.permissions[permission]) {
     return false;
   }
   return threadInfo.currentUser.permissions[permission].value;
 }
 
 function viewerIsMember(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(
     threadInfo &&
     threadInfo.currentUser.role !== null &&
     threadInfo.currentUser.role !== undefined
   );
 }
 
 function threadIsInHome(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(threadInfo && threadInfo.currentUser.subscription.home);
 }
 
 // Can have messages
 function threadInChatList(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return (
     viewerIsMember(threadInfo) &&
     threadHasPermission(threadInfo, threadPermissions.VISIBLE)
   );
 }
 
 function threadIsTopLevel(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(
     threadInChatList(threadInfo) &&
     threadInfo &&
     threadInfo.type !== threadTypes.SIDEBAR
   );
 }
 
 function threadInBackgroundChatList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return threadInChatList(threadInfo) && !threadIsInHome(threadInfo);
 }
 
 function threadInHomeChatList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return threadInChatList(threadInfo) && threadIsInHome(threadInfo);
 }
 
 // Can have Calendar entries,
 // does appear as a top-level entity in the thread list
 function threadInFilterList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return (
     threadInChatList(threadInfo) &&
     !!threadInfo &&
     threadInfo.type !== threadTypes.SIDEBAR
   );
 }
 
 function userIsMember(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
   userID: string,
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   return threadInfo.members.some(
     (member) =>
       member.id === userID && member.role !== null && member.role !== undefined,
   );
 }
 
 function threadActualMembers(
   memberInfos: $ReadOnlyArray<MemberInfo>,
 ): $ReadOnlyArray<string> {
   return memberInfos
     .filter(
       (memberInfo) => memberInfo.role !== null && memberInfo.role !== undefined,
     )
     .map((memberInfo) => memberInfo.id);
 }
 
 function threadIsGroupChat(threadInfo: ThreadInfo | RawThreadInfo) {
   return (
     threadInfo.members.filter(
       (member) =>
         member.role || member.permissions[threadPermissions.VOICED]?.value,
     ).length > 2
   );
 }
 
 function threadOrParentThreadIsGroupChat(
   threadInfo: RawThreadInfo | ThreadInfo,
 ) {
   return threadInfo.members.length > 2;
 }
 
 function threadIsPending(threadID: ?string) {
   return threadID?.startsWith('pending');
 }
 
 function threadIsPersonalAndPending(threadInfo: ?(ThreadInfo | RawThreadInfo)) {
   return (
     threadInfo?.type === threadTypes.PERSONAL && threadIsPending(threadInfo?.id)
   );
 }
 
 function getThreadOtherUsers(
   threadInfo: ThreadInfo | RawThreadInfo,
   viewerID: ?string,
 ): string[] {
   return threadInfo.members
     .filter((member) => member.role && member.id !== viewerID)
     .map((member) => member.id);
 }
 
 function getSingleOtherUser(
   threadInfo: ThreadInfo | RawThreadInfo,
   viewerID: ?string,
 ) {
   if (!viewerID) {
     return undefined;
   }
 
   const otherMemberIDs = threadInfo.members
     .map((member) => member.id)
     .filter((id) => id !== viewerID);
   if (otherMemberIDs.length !== 1) {
     return undefined;
   }
   return otherMemberIDs[0];
 }
 
 function getPendingThreadID(
   threadType: ThreadType,
   memberIDs: $ReadOnlyArray<string>,
   sourceMessageID: ?string,
 ) {
   const pendingThreadKey = sourceMessageID
     ? `sidebar/${sourceMessageID}`
     : [...memberIDs].sort().join('+');
   return `pending/type${threadType}/${pendingThreadKey}`;
 }
 
 type CreatePendingThreadArgs = {|
   +viewerID: string,
   +threadType: ThreadType,
   +members?: $ReadOnlyArray<GlobalAccountUserInfo | UserInfo>,
   +parentThreadID?: ?string,
   +threadColor?: ?string,
   +name?: ?string,
   +sourceMessageID?: string,
 |};
 
 function createPendingThread({
   viewerID,
   threadType,
   members,
   parentThreadID,
   threadColor,
   name,
   sourceMessageID,
 }: CreatePendingThreadArgs) {
   const now = Date.now();
   members = members ?? [];
   const nonViewerMemberIDs = members.map((member) => member.id);
   const memberIDs = [...nonViewerMemberIDs, viewerID];
   const threadID = getPendingThreadID(threadType, memberIDs, sourceMessageID);
 
   const permissions = {
     [threadPermissions.KNOW_OF]: true,
     [threadPermissions.VISIBLE]: true,
     [threadPermissions.VOICED]: true,
   };
 
   const membershipPermissions = getAllThreadPermissions(
     makePermissionsBlob(permissions, null, threadID, threadType),
     threadID,
   );
   const role = {
     id: `${threadID}/role`,
     name: 'Members',
     permissions,
     isDefault: true,
   };
 
   const rawThreadInfo = {
     id: threadID,
     type: threadType,
     name: name ?? null,
     description: null,
     color: threadColor ?? generatePendingThreadColor(memberIDs),
     creationTime: now,
     parentThreadID: parentThreadID ?? null,
     members: [
       {
         id: viewerID,
         role: role.id,
         permissions: membershipPermissions,
         isSender: false,
       },
       ...members.map((member) => ({
         id: member.id,
         role: role.id,
         permissions: membershipPermissions,
         isSender: false,
       })),
     ],
     roles: {
       [role.id]: role,
     },
     currentUser: {
       role: role.id,
       permissions: membershipPermissions,
       subscription: {
         pushNotifs: false,
         home: false,
       },
       unread: false,
     },
     repliesCount: 0,
     sourceMessageID,
   };
 
   const userInfos = {};
   members.forEach((member) => (userInfos[member.id] = member));
 
   return threadInfoFromRawThreadInfo(rawThreadInfo, viewerID, userInfos);
 }
 
 function createPendingThreadItem(
   viewerID: string,
   user: GlobalAccountUserInfo,
 ): ChatThreadItem {
   const threadInfo = createPendingThread({
     viewerID,
     threadType: threadTypes.PERSONAL,
     members: [user],
   });
 
   return {
     type: 'chatThreadItem',
     threadInfo,
     mostRecentMessageInfo: null,
     mostRecentNonLocalMessage: null,
     lastUpdatedTime: threadInfo.creationTime,
     lastUpdatedTimeIncludingSidebars: threadInfo.creationTime,
     sidebars: [],
     pendingPersonalThreadUserInfo: {
       id: user.id,
       username: user.username,
     },
   };
 }
 
 function createPendingSidebar(
   messageInfo: ComposableMessageInfo | RobotextMessageInfo,
   threadInfo: ThreadInfo,
   viewerID: string,
   markdownRules: ParserRules,
 ) {
   const { id, username } = messageInfo.creator;
   const { id: parentThreadID, color } = threadInfo;
 
   const messageTitle = getMessageTitle(
     messageInfo,
     threadInfo,
     markdownRules,
     'global_viewer',
   );
   const threadName = trimText(messageTitle, 30);
 
   invariant(username, 'username should be set in createPendingSidebar');
   const initialMemberUserInfo: GlobalAccountUserInfo = { id, username };
   const creatorIsMember = userIsMember(threadInfo, id);
   return createPendingThread({
     viewerID,
     threadType: threadTypes.SIDEBAR,
     members: creatorIsMember ? [initialMemberUserInfo] : [],
     parentThreadID,
     threadColor: color,
     name: threadName,
     sourceMessageID: messageInfo.id,
   });
 }
 
 function pendingThreadType(numberOfOtherMembers: number) {
   return numberOfOtherMembers === 1
     ? threadTypes.PERSONAL
     : threadTypes.CHAT_SECRET;
 }
 
 type CreateRealThreadParameters = {|
   +threadInfo: ThreadInfo,
   +dispatchActionPromise: DispatchActionPromise,
   +createNewThread: (NewThreadRequest) => Promise<NewThreadResult>,
   +sourceMessageID: ?string,
   +viewerID: ?string,
   +handleError?: () => mixed,
 |};
 async function createRealThreadFromPendingThread({
   threadInfo,
   dispatchActionPromise,
   createNewThread,
   sourceMessageID,
   viewerID,
 }: CreateRealThreadParameters): Promise<string> {
   if (!threadIsPending(threadInfo.id)) {
     return threadInfo.id;
   }
 
   const otherMemberIDs = getThreadOtherUsers(threadInfo, viewerID);
   let resultPromise;
   if (threadInfo.type !== threadTypes.SIDEBAR) {
     invariant(
       otherMemberIDs.length > 0,
       'otherMemberIDs should not be empty for threads',
     );
     resultPromise = createNewThread({
       type: pendingThreadType(otherMemberIDs.length),
       initialMemberIDs: otherMemberIDs,
       color: threadInfo.color,
     });
   } else {
     invariant(
       sourceMessageID,
       'sourceMessageID should be set when creating a sidebar',
     );
 
     resultPromise = createNewThread({
       type: threadTypes.SIDEBAR,
       initialMemberIDs: otherMemberIDs,
       color: threadInfo.color,
       sourceMessageID,
       parentThreadID: threadInfo.parentThreadID,
       name: threadInfo.name,
     });
   }
   dispatchActionPromise(newThreadActionTypes, resultPromise);
   const { newThreadID } = await resultPromise;
   return newThreadID;
 }
 
 type RawThreadInfoOptions = {|
   +includeVisibilityRules?: ?boolean,
   +filterMemberList?: ?boolean,
 |};
 function rawThreadInfoFromServerThreadInfo(
   serverThreadInfo: ServerThreadInfo,
   viewerID: string,
   options?: RawThreadInfoOptions,
 ): ?RawThreadInfo {
   const includeVisibilityRules = options?.includeVisibilityRules;
   const filterMemberList = options?.filterMemberList;
 
   const members = [];
   let currentUser;
   for (const serverMember of serverThreadInfo.members) {
     if (
       filterMemberList &&
       serverMember.id !== viewerID &&
       !serverMember.role &&
       !memberHasAdminPowers(serverMember)
     ) {
       continue;
     }
     members.push({
       id: serverMember.id,
       role: serverMember.role,
       permissions: serverMember.permissions,
       isSender: serverMember.isSender,
     });
     if (serverMember.id === viewerID) {
       currentUser = {
         role: serverMember.role,
         permissions: serverMember.permissions,
         subscription: serverMember.subscription,
         unread: serverMember.unread,
       };
     }
   }
 
   let currentUserPermissions;
   if (currentUser) {
     currentUserPermissions = currentUser.permissions;
   } else {
     currentUserPermissions = getAllThreadPermissions(null, serverThreadInfo.id);
     currentUser = {
       role: null,
       permissions: currentUserPermissions,
       subscription: {
         home: false,
         pushNotifs: false,
       },
       unread: null,
     };
   }
   if (!permissionLookup(currentUserPermissions, threadPermissions.KNOW_OF)) {
     return null;
   }
 
   const rawThreadInfo: RawThreadInfo = {
     id: serverThreadInfo.id,
     type: serverThreadInfo.type,
     name: serverThreadInfo.name,
     description: serverThreadInfo.description,
     color: serverThreadInfo.color,
     creationTime: serverThreadInfo.creationTime,
     parentThreadID: serverThreadInfo.parentThreadID,
     members,
     roles: serverThreadInfo.roles,
     currentUser,
     repliesCount: serverThreadInfo.repliesCount,
   };
   const sourceMessageID = serverThreadInfo.sourceMessageID;
   if (sourceMessageID) {
     rawThreadInfo.sourceMessageID = sourceMessageID;
   }
   if (!includeVisibilityRules) {
     return rawThreadInfo;
   }
   return ({
     ...rawThreadInfo,
     visibilityRules: rawThreadInfo.type,
   }: any);
 }
 
 function robotextName(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): string {
   const threadUsernames: string[] = threadInfo.members
     .filter(
       (threadMember) =>
         threadMember.id !== viewerID &&
         (threadMember.role || memberHasAdminPowers(threadMember)),
     )
     .map(
       (threadMember) =>
         userInfos[threadMember.id] && userInfos[threadMember.id].username,
     )
     .filter(Boolean);
   if (threadUsernames.length === 0) {
     return 'just you';
   }
   return pluralize(threadUsernames);
 }
 
 function threadUIName(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): string {
   const uiName = threadInfo.name
     ? threadInfo.name
     : robotextName(threadInfo, viewerID, userInfos);
   return firstLine(uiName);
 }
 
 function threadInfoFromRawThreadInfo(
   rawThreadInfo: RawThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ThreadInfo {
   const threadInfo: ThreadInfo = {
     id: rawThreadInfo.id,
     type: rawThreadInfo.type,
     name: rawThreadInfo.name,
     uiName: threadUIName(rawThreadInfo, viewerID, userInfos),
     description: rawThreadInfo.description,
     color: rawThreadInfo.color,
     creationTime: rawThreadInfo.creationTime,
     parentThreadID: rawThreadInfo.parentThreadID,
     members: rawThreadInfo.members,
     roles: rawThreadInfo.roles,
     currentUser: getCurrentUser(rawThreadInfo, viewerID, userInfos),
     repliesCount: rawThreadInfo.repliesCount,
   };
   const { sourceMessageID } = rawThreadInfo;
   if (sourceMessageID) {
     threadInfo.sourceMessageID = sourceMessageID;
   }
   return threadInfo;
 }
 
 function getCurrentUser(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ThreadCurrentUserInfo {
   if (!threadFrozenDueToBlock(threadInfo, viewerID, userInfos)) {
     return threadInfo.currentUser;
   }
 
   return {
     ...threadInfo.currentUser,
     permissions: {
       ...threadInfo.currentUser.permissions,
       ...disabledPermissions,
     },
   };
 }
 
 function threadIsWithBlockedUserOnly(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
   checkOnlyViewerBlock?: boolean,
 ): boolean {
   if (
     threadOrParentThreadIsGroupChat(threadInfo) ||
     threadOrParentThreadHasAdminRole(threadInfo)
   ) {
     return false;
   }
 
   const otherUserID = getSingleOtherUser(threadInfo, viewerID);
   if (!otherUserID) {
     return false;
   }
   const otherUserRelationshipStatus =
     userInfos[otherUserID]?.relationshipStatus;
 
   if (checkOnlyViewerBlock) {
     return (
       otherUserRelationshipStatus === userRelationshipStatus.BLOCKED_BY_VIEWER
     );
   }
 
   return (
     !!otherUserRelationshipStatus &&
     relationshipBlockedInEitherDirection(otherUserRelationshipStatus)
   );
 }
 
 function threadFrozenDueToBlock(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos);
 }
 
 function threadFrozenDueToViewerBlock(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos, true);
 }
 
 function rawThreadInfoFromThreadInfo(threadInfo: ThreadInfo): RawThreadInfo {
   const rawThreadInfo: RawThreadInfo = {
     id: threadInfo.id,
     type: threadInfo.type,
     name: threadInfo.name,
     description: threadInfo.description,
     color: threadInfo.color,
     creationTime: threadInfo.creationTime,
     parentThreadID: threadInfo.parentThreadID,
     members: threadInfo.members,
     roles: threadInfo.roles,
     currentUser: threadInfo.currentUser,
     repliesCount: threadInfo.repliesCount,
   };
   const { sourceMessageID } = threadInfo;
   if (sourceMessageID) {
     rawThreadInfo.sourceMessageID = sourceMessageID;
   }
   return rawThreadInfo;
 }
 
 const threadTypeDescriptions = {
   [threadTypes.CHAT_NESTED_OPEN]:
     'Anybody in the parent thread can see an open child thread.',
   [threadTypes.CHAT_SECRET]:
     'Only visible to its members and admins of ancestor threads.',
 };
 
 function usersInThreadInfo(threadInfo: RawThreadInfo | ThreadInfo): string[] {
   const userIDs = new Set();
   for (const member of threadInfo.members) {
     userIDs.add(member.id);
   }
   return [...userIDs];
 }
 
 function memberIsAdmin(
   memberInfo: RelativeMemberInfo | MemberInfo,
   threadInfo: ThreadInfo | RawThreadInfo,
 ) {
   return memberInfo.role && roleIsAdminRole(threadInfo.roles[memberInfo.role]);
 }
 
 // Since we don't have access to all of the ancestor ThreadInfos, we approximate
 // "parent admin" as anybody with CHANGE_ROLE permissions.
 function memberHasAdminPowers(
   memberInfo: RelativeMemberInfo | MemberInfo | ServerMemberInfo,
 ): boolean {
   return !!memberInfo.permissions[threadPermissions.CHANGE_ROLE]?.value;
 }
 
 function roleIsAdminRole(roleInfo: ?RoleInfo) {
   return roleInfo && !roleInfo.isDefault && roleInfo.name === 'Admins';
 }
 
 function threadHasAdminRole(
   threadInfo: ?(RawThreadInfo | ThreadInfo | ServerThreadInfo),
 ) {
   if (!threadInfo) {
     return false;
   }
   return _find({ name: 'Admins' })(threadInfo.roles);
 }
 
 function threadOrParentThreadHasAdminRole(
   threadInfo: RawThreadInfo | ThreadInfo,
 ) {
   return (
     threadInfo.members.filter((member) => memberHasAdminPowers(member)).length >
     0
   );
 }
 
 function identifyInvalidatedThreads(
   updateInfos: $ReadOnlyArray<UpdateInfo>,
 ): Set<string> {
   const invalidated = new Set();
   for (const updateInfo of updateInfos) {
     if (updateInfo.type === updateTypes.DELETE_THREAD) {
       invalidated.add(updateInfo.threadID);
     }
   }
   return invalidated;
 }
 
 const permissionsDisabledByBlockArray = [
   threadPermissions.VOICED,
   threadPermissions.EDIT_ENTRIES,
   threadPermissions.EDIT_THREAD,
   threadPermissions.CREATE_SUBTHREADS,
   threadPermissions.CREATE_SIDEBARS,
   threadPermissions.JOIN_THREAD,
   threadPermissions.EDIT_PERMISSIONS,
   threadPermissions.ADD_MEMBERS,
   threadPermissions.REMOVE_MEMBERS,
 ];
 
 const permissionsDisabledByBlock: Set<ThreadPermission> = new Set(
   permissionsDisabledByBlockArray,
 );
 
 const disabledPermissions: ThreadPermissionsInfo = permissionsDisabledByBlockArray.reduce(
   (permissions: ThreadPermissionsInfo, permission: string) => ({
     ...permissions,
     [permission]: { value: false, source: null },
   }),
   {},
 );
 
 // Consider updating itemHeight in native/chat/chat-thread-list.react.js
 // if you change this
 const emptyItemText =
   `Background threads are just like normal threads, except they don't ` +
   `contribute to your unread count.\n\n` +
   `To move a thread over here, switch the “Background” option in its settings.`;
 
 const threadSearchText = (
   threadInfo: RawThreadInfo | ThreadInfo,
   userInfos: UserInfos,
   viewerID: ?string,
 ): string => {
   const searchTextArray = [];
   if (threadInfo.name) {
     searchTextArray.push(threadInfo.name);
   }
   if (threadInfo.description) {
     searchTextArray.push(threadInfo.description);
   }
   for (const member of threadInfo.members) {
     const isParentAdmin = memberHasAdminPowers(member);
     if (!member.role && !isParentAdmin) {
       continue;
     }
     if (member.id === viewerID) {
       continue;
     }
     const userInfo = userInfos[member.id];
     if (userInfo && userInfo.username) {
       searchTextArray.push(userInfo.username);
     }
   }
   return searchTextArray.join(' ');
 };
 
 function threadNoun(threadType: ThreadType) {
   return threadType === threadTypes.SIDEBAR ? 'sidebar' : 'thread';
 }
 
 function threadLabel(threadType: ThreadType) {
   if (threadType === threadTypes.CHAT_SECRET) {
     return 'Secret';
   } else if (threadType === threadTypes.PERSONAL) {
     return 'Personal';
   } else if (threadType === threadTypes.SIDEBAR) {
     return 'Sidebar';
   } else if (threadType === threadTypes.PRIVATE) {
     return 'Private';
   } else if (threadType === threadTypes.CHAT_NESTED_OPEN) {
     return 'Open';
   }
   invariant(false, `unexpected threadType ${threadType}`);
 }
 
 function useWatchThread(threadInfo: ?ThreadInfo) {
   const dispatchActionPromise = useDispatchActionPromise();
   const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);
 
   const threadID = threadInfo?.id;
   const threadNotInChatList = !threadInChatList(threadInfo);
   React.useEffect(() => {
     if (threadID && threadNotInChatList) {
       threadWatcher.watchID(threadID);
       dispatchActionPromise(
         fetchMostRecentMessagesActionTypes,
         callFetchMostRecentMessages(threadID),
       );
     }
     return () => {
       if (threadID && threadNotInChatList) {
         threadWatcher.removeID(threadID);
       }
     };
   }, [
     callFetchMostRecentMessages,
     dispatchActionPromise,
     threadNotInChatList,
     threadID,
   ]);
 }
 
 type UseCurrentThreadInfoArgs = {|
   +baseThreadInfo: ?ThreadInfo,
   +searching: boolean,
   +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
-  +sourceMessageID: ?string,
 |};
 function useCurrentThreadInfo({
   baseThreadInfo,
   searching,
   userInfoInputArray,
-  sourceMessageID,
 }: UseCurrentThreadInfoArgs) {
   const threadInfos = useSelector(threadInfoSelector);
   const viewerID = useSelector(
     (state) => state.currentUserInfo && state.currentUserInfo.id,
   );
   const userInfos = useSelector((state) => state.userStore.userInfos);
 
   const pendingToRealizedThreadIDs = useSelector((state) =>
     pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
   );
   const latestThreadInfo = React.useMemo((): ?ThreadInfo => {
     if (!baseThreadInfo) {
       return null;
     }
 
     const threadInfoFromParams = baseThreadInfo;
     const threadInfoFromStore = threadInfos[threadInfoFromParams.id];
 
     if (threadInfoFromStore) {
       return threadInfoFromStore;
     } else if (!viewerID || !threadIsPending(threadInfoFromParams.id)) {
       return undefined;
     }
 
+    const { sourceMessageID } = threadInfoFromParams;
     const pendingThreadID = searching
       ? getPendingThreadID(
           pendingThreadType(userInfoInputArray.length),
           [...userInfoInputArray.map((user) => user.id), viewerID],
           sourceMessageID,
         )
       : getPendingThreadID(
           threadInfoFromParams.type,
           threadInfoFromParams.members.map((member) => member.id),
           sourceMessageID,
         );
 
     const realizedThreadID = pendingToRealizedThreadIDs.get(pendingThreadID);
     if (realizedThreadID && threadInfos[realizedThreadID]) {
       return threadInfos[realizedThreadID];
     }
 
     const updatedThread = searching
       ? createPendingThread({
           viewerID,
           threadType: pendingThreadType(userInfoInputArray.length),
           members: userInfoInputArray,
         })
       : threadInfoFromParams;
     return {
       ...updatedThread,
       currentUser: getCurrentUser(updatedThread, viewerID, userInfos),
     };
   }, [
     baseThreadInfo,
     threadInfos,
     viewerID,
     searching,
     userInfoInputArray,
-    sourceMessageID,
     pendingToRealizedThreadIDs,
     userInfos,
   ]);
 
   return latestThreadInfo ? latestThreadInfo : baseThreadInfo;
 }
 
 type ThreadTypeParentRequirement = 'optional' | 'required' | 'disabled';
 function getThreadTypeParentRequirement(
   threadType: ThreadType,
 ): ThreadTypeParentRequirement {
   if (
     threadType === threadTypes.CHAT_NESTED_OPEN ||
     threadType === threadTypes.SIDEBAR
   ) {
     return 'required';
   } else if (
     threadType === threadTypes.PERSONAL ||
     threadType === threadTypes.PRIVATE
   ) {
     return 'disabled';
   } else {
     return 'optional';
   }
 }
 
 function threadMemberHasPermission(
   threadInfo: ServerThreadInfo,
   memberID: string,
   permission: ThreadPermission,
 ): boolean {
   for (const member of threadInfo.members) {
     if (member.id !== memberID) {
       continue;
     }
     return permissionLookup(member.permissions, permission);
   }
   return false;
 }
 
 function useCanCreateSidebarFromMessage(
   threadInfo: ThreadInfo,
   messageInfo: ComposableMessageInfo | RobotextMessageInfo,
 ) {
   const messageCreatorUserInfo = useSelector(
     (state) => state.userStore.userInfos[messageInfo.creator.id],
   );
 
   if (!messageInfo.id || threadInfo.sourceMessageID === messageInfo.id) {
     return false;
   }
 
   const messageCreatorRelationship = messageCreatorUserInfo?.relationshipStatus;
   const creatorRelationshipHasBlock =
     messageCreatorRelationship &&
     relationshipBlockedInEitherDirection(messageCreatorRelationship);
 
   const hasPermission = threadHasPermission(
     threadInfo,
     threadPermissions.CREATE_SIDEBARS,
   );
 
   return hasPermission && !creatorRelationshipHasBlock;
 }
 
 function useSidebarExistsOrCanBeCreated(
   threadInfo: ThreadInfo,
   messageItem: ChatMessageInfoItem,
 ) {
   const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage(
     threadInfo,
     messageItem.messageInfo,
   );
   return !!messageItem.threadCreatedFromMessage || canCreateSidebarFromMessage;
 }
 
 export {
   colorIsDark,
   generateRandomColor,
   generatePendingThreadColor,
   threadHasPermission,
   viewerIsMember,
   threadInChatList,
   threadIsTopLevel,
   threadInBackgroundChatList,
   threadInHomeChatList,
   threadIsInHome,
   threadInFilterList,
   userIsMember,
   threadActualMembers,
   threadIsGroupChat,
   threadIsPending,
   threadIsPersonalAndPending,
   getSingleOtherUser,
   getPendingThreadID,
   createPendingThread,
   createPendingThreadItem,
   createPendingSidebar,
   pendingThreadType,
   createRealThreadFromPendingThread,
   getCurrentUser,
   threadFrozenDueToBlock,
   threadFrozenDueToViewerBlock,
   rawThreadInfoFromServerThreadInfo,
   robotextName,
   threadInfoFromRawThreadInfo,
   rawThreadInfoFromThreadInfo,
   threadTypeDescriptions,
   usersInThreadInfo,
   memberIsAdmin,
   memberHasAdminPowers,
   roleIsAdminRole,
   threadHasAdminRole,
   identifyInvalidatedThreads,
   permissionsDisabledByBlock,
   emptyItemText,
   threadSearchText,
   threadNoun,
   threadLabel,
   useWatchThread,
   useCurrentThreadInfo,
   getThreadTypeParentRequirement,
   threadMemberHasPermission,
   useCanCreateSidebarFromMessage,
   useSidebarExistsOrCanBeCreated,
 };
diff --git a/native/chat/message-list-container.react.js b/native/chat/message-list-container.react.js
index 22c57ca96..574bbb258 100644
--- a/native/chat/message-list-container.react.js
+++ b/native/chat/message-list-container.react.js
@@ -1,405 +1,404 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View } from 'react-native';
 
 import {
   type ChatMessageItem,
   useMessageListData,
 } from 'lib/selectors/chat-selectors';
 import {
   userInfoSelectorForPotentialMembers,
   userSearchIndexForPotentialMembers,
 } from 'lib/selectors/user-selectors';
 import { messageID } from 'lib/shared/message-utils';
 import { getPotentialMemberItems } from 'lib/shared/search-utils';
 import { useCurrentThreadInfo } from 'lib/shared/thread-utils';
 import { messageTypes } from 'lib/types/message-types';
 import type { ThreadInfo } from 'lib/types/thread-types';
 import type { AccountUserInfo, UserListItem } from 'lib/types/user-types';
 
 import ContentLoading from '../components/content-loading.react';
 import NodeHeightMeasurer from '../components/node-height-measurer.react';
 import { type InputState, InputStateContext } from '../input/input-state';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context';
 import type { NavigationRoute } from '../navigation/route-names';
 import { useSelector } from '../redux/redux-utils';
 import { type Colors, useColors, useStyles } from '../themes/colors';
 import ChatInputBar from './chat-input-bar.react';
 import { chatMessageItemKey } from './chat-list.react';
 import type { ChatNavigationProp } from './chat.react';
 import { composedMessageMaxWidthSelector } from './composed-message-width';
 import { dummyNodeForRobotextMessageHeightMeasurement } from './inner-robotext-message.react';
 import { dummyNodeForTextMessageHeightMeasurement } from './inner-text-message.react';
 import MessageListThreadSearch from './message-list-thread-search.react';
 import {
   MessageListContext,
   useMessageListContext,
 } from './message-list-types';
 import MessageList from './message-list.react';
 import type { ChatMessageInfoItemWithHeight } from './message.react';
 import { multimediaMessageContentSizes } from './multimedia-message.react';
 export type ChatMessageItemWithHeight =
   | {| itemType: 'loader' |}
   | ChatMessageInfoItemWithHeight;
 
 type BaseProps = {|
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 |};
 type Props = {|
   ...BaseProps,
   // Redux state
   +usernameInputText: string,
   +updateUsernameInput: (text: string) => void,
   +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
   +updateTagInput: (items: $ReadOnlyArray<AccountUserInfo>) => void,
   +otherUserInfos: { [id: string]: AccountUserInfo },
   +userSearchResults: $ReadOnlyArray<UserListItem>,
   +threadInfo: ThreadInfo,
   +messageListData: $ReadOnlyArray<ChatMessageItem>,
   +composedMessageMaxWidth: number,
   +colors: Colors,
   +styles: typeof unboundStyles,
   // withInputState
   +inputState: ?InputState,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
 |};
 type State = {|
   +listDataWithHeights: ?$ReadOnlyArray<ChatMessageItemWithHeight>,
 |};
 class MessageListContainer extends React.PureComponent<Props, State> {
   state: State = {
     listDataWithHeights: null,
   };
   pendingListDataWithHeights: ?$ReadOnlyArray<ChatMessageItemWithHeight>;
 
   get frozen() {
     const { overlayContext } = this.props;
     invariant(
       overlayContext,
       'MessageListContainer should have OverlayContext',
     );
     return overlayContext.scrollBlockingModalStatus !== 'closed';
   }
 
   componentDidUpdate(prevProps: Props) {
     const oldListData = prevProps.messageListData;
     const newListData = this.props.messageListData;
     if (!newListData && oldListData) {
       this.setState({ listDataWithHeights: null });
     }
 
     if (!this.frozen && this.pendingListDataWithHeights) {
       this.setState({ listDataWithHeights: this.pendingListDataWithHeights });
       this.pendingListDataWithHeights = undefined;
     }
   }
 
   render() {
     const { threadInfo, styles } = this.props;
     const { listDataWithHeights } = this.state;
     const { searching } = this.props.route.params;
 
     let searchComponent = null;
     if (searching) {
       searchComponent = (
         <MessageListThreadSearch
           usernameInputText={this.props.usernameInputText}
           updateUsernameInput={this.props.updateUsernameInput}
           userInfoInputArray={this.props.userInfoInputArray}
           updateTagInput={this.props.updateTagInput}
           otherUserInfos={this.props.otherUserInfos}
           userSearchResults={this.props.userSearchResults}
         />
       );
     }
 
     const showMessageList =
       !searching || this.props.userInfoInputArray.length > 0;
     let threadContent = null;
     if (showMessageList) {
       let messageList;
       if (listDataWithHeights) {
         messageList = (
           <MessageList
             threadInfo={threadInfo}
             messageListData={listDataWithHeights}
             navigation={this.props.navigation}
             route={this.props.route}
           />
         );
       } else {
         messageList = (
           <ContentLoading fillType="flex" colors={this.props.colors} />
         );
       }
 
       threadContent = (
         <View style={styles.threadContent}>
           {messageList}
           <ChatInputBar
             threadInfo={threadInfo}
             navigation={this.props.navigation}
             route={this.props.route}
           />
         </View>
       );
     }
 
     return (
       <View style={styles.container}>
         <NodeHeightMeasurer
           listData={this.props.messageListData}
           itemToID={this.heightMeasurerID}
           itemToMeasureKey={this.heightMeasurerKey}
           itemToDummy={this.heightMeasurerDummy}
           mergeItemWithHeight={this.heightMeasurerMergeItem}
           allHeightsMeasured={this.allHeightsMeasured}
           inputState={this.props.inputState}
           composedMessageMaxWidth={this.props.composedMessageMaxWidth}
         />
         {searchComponent}
         {threadContent}
       </View>
     );
   }
 
   heightMeasurerID = (item: ChatMessageItem) => {
     return chatMessageItemKey(item);
   };
 
   heightMeasurerKey = (item: ChatMessageItem) => {
     if (item.itemType !== 'message') {
       return null;
     }
     const { messageInfo } = item;
     if (messageInfo.type === messageTypes.TEXT) {
       return messageInfo.text;
     } else if (item.robotext && typeof item.robotext === 'string') {
       return item.robotext;
     }
     return null;
   };
 
   heightMeasurerDummy = (item: ChatMessageItem) => {
     invariant(
       item.itemType === 'message',
       'NodeHeightMeasurer asked for dummy for non-message item',
     );
     const { messageInfo } = item;
     if (messageInfo.type === messageTypes.TEXT) {
       return dummyNodeForTextMessageHeightMeasurement(messageInfo.text);
     } else if (item.robotext && typeof item.robotext === 'string') {
       return dummyNodeForRobotextMessageHeightMeasurement(item.robotext);
     }
     invariant(false, 'NodeHeightMeasurer asked for dummy for non-text message');
   };
 
   heightMeasurerMergeItem = (item: ChatMessageItem, height: ?number) => {
     if (item.itemType !== 'message') {
       return item;
     }
 
     const { messageInfo } = item;
     invariant(
       messageInfo.type !== messageTypes.SIDEBAR_SOURCE,
       'Sidebar source messages should be replaced by sourceMessage before being measured',
     );
     const { threadInfo } = this.props;
     if (
       messageInfo.type === messageTypes.IMAGES ||
       messageInfo.type === messageTypes.MULTIMEDIA
     ) {
       const { inputState } = this.props;
       // Conditional due to Flow...
       const localMessageInfo = item.localMessageInfo
         ? item.localMessageInfo
         : null;
       const id = messageID(messageInfo);
       const pendingUploads =
         inputState &&
         inputState.pendingUploads &&
         inputState.pendingUploads[id];
       const sizes = multimediaMessageContentSizes(
         messageInfo,
         this.props.composedMessageMaxWidth,
       );
       return {
         itemType: 'message',
         messageShapeType: 'multimedia',
         messageInfo,
         localMessageInfo,
         threadInfo,
         startsConversation: item.startsConversation,
         startsCluster: item.startsCluster,
         endsCluster: item.endsCluster,
         threadCreatedFromMessage: item.threadCreatedFromMessage,
         pendingUploads,
         ...sizes,
       };
     }
 
     invariant(height !== null && height !== undefined, 'height should be set');
     if (messageInfo.type === messageTypes.TEXT) {
       // Conditional due to Flow...
       const localMessageInfo = item.localMessageInfo
         ? item.localMessageInfo
         : null;
       return {
         itemType: 'message',
         messageShapeType: 'text',
         messageInfo,
         localMessageInfo,
         threadInfo,
         startsConversation: item.startsConversation,
         startsCluster: item.startsCluster,
         endsCluster: item.endsCluster,
         threadCreatedFromMessage: item.threadCreatedFromMessage,
         contentHeight: height,
       };
     } else {
       invariant(
         typeof item.robotext === 'string',
         "Flow can't handle our fancy types :(",
       );
       return {
         itemType: 'message',
         messageShapeType: 'robotext',
         messageInfo,
         threadInfo,
         startsConversation: item.startsConversation,
         startsCluster: item.startsCluster,
         endsCluster: item.endsCluster,
         threadCreatedFromMessage: item.threadCreatedFromMessage,
         robotext: item.robotext,
         contentHeight: height,
       };
     }
   };
 
   allHeightsMeasured = (
     listDataWithHeights: $ReadOnlyArray<ChatMessageItemWithHeight>,
   ) => {
     if (this.frozen) {
       this.pendingListDataWithHeights = listDataWithHeights;
     } else {
       this.setState({ listDataWithHeights });
     }
   };
 }
 
 const unboundStyles = {
   container: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   threadContent: {
     flex: 1,
   },
 };
 
 export default React.memo<BaseProps>(function ConnectedMessageListContainer(
   props: BaseProps,
 ) {
   const [usernameInputText, setUsernameInputText] = React.useState('');
   const [userInfoInputArray, setUserInfoInputArray] = React.useState<
     $ReadOnlyArray<AccountUserInfo>,
   >([]);
   const updateTagInput = React.useCallback(
     (input: $ReadOnlyArray<AccountUserInfo>) => setUserInfoInputArray(input),
     [],
   );
   const updateUsernameInput = React.useCallback(
     (text: string) => setUsernameInputText(text),
     [],
   );
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
   const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);
 
   const userSearchResults = React.useMemo(
     () =>
       getPotentialMemberItems(
         usernameInputText,
         otherUserInfos,
         userSearchIndex,
         userInfoInputArray.map((userInfo) => userInfo.id),
       ),
     [usernameInputText, otherUserInfos, userSearchIndex, userInfoInputArray],
   );
 
   const [baseThreadInfo, setBaseThreadInfo] = React.useState(
     props.route.params.threadInfo,
   );
 
   const { searching, sourceMessageID } = props.route.params;
   const threadInfo = useCurrentThreadInfo({
     baseThreadInfo,
     searching: !!searching,
     userInfoInputArray,
-    sourceMessageID,
   });
   invariant(threadInfo, 'threadInfo must be specified in messageListContainer');
 
   const inputState = React.useContext(InputStateContext);
   const hideSearch = React.useCallback(() => {
     setBaseThreadInfo(threadInfo);
     props.navigation.setParams({
       searching: false,
     });
   }, [props.navigation, threadInfo]);
   React.useEffect(() => {
     if (!searching) {
       return;
     }
     inputState?.registerSendCallback(hideSearch);
     return () => inputState?.unregisterSendCallback(hideSearch);
   }, [hideSearch, inputState, searching]);
 
   const { setParams } = props.navigation;
   React.useEffect(() => {
     setParams({ threadInfo });
   }, [setParams, threadInfo]);
 
   const threadID = threadInfo.id;
   const messageListData = useMessageListData({
     sourceMessageID,
     searching: !!searching,
     userInfoInputArray,
     threadInfo,
   });
   invariant(
     messageListData,
     'messageListData must be specified in messageListContainer',
   );
   const composedMessageMaxWidth = useSelector(composedMessageMaxWidthSelector);
   const colors = useColors();
   const styles = useStyles(unboundStyles);
   const overlayContext = React.useContext(OverlayContext);
   const messageListContext = useMessageListContext(threadID);
   return (
     <MessageListContext.Provider value={messageListContext}>
       <MessageListContainer
         {...props}
         usernameInputText={usernameInputText}
         updateUsernameInput={updateUsernameInput}
         userInfoInputArray={userInfoInputArray}
         updateTagInput={updateTagInput}
         otherUserInfos={otherUserInfos}
         userSearchResults={userSearchResults}
         threadInfo={threadInfo}
         messageListData={messageListData}
         composedMessageMaxWidth={composedMessageMaxWidth}
         colors={colors}
         styles={styles}
         inputState={inputState}
         overlayContext={overlayContext}
       />
     </MessageListContext.Provider>
   );
 });
diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js
index 71b0abde2..6e53e1554 100644
--- a/web/chat/chat-message-list.react.js
+++ b/web/chat/chat-message-list.react.js
@@ -1,476 +1,475 @@
 // @flow
 
 import classNames from 'classnames';
 import { detect as detectBrowser } from 'detect-browser';
 import invariant from 'invariant';
 import * as React from 'react';
 import { useDrop } from 'react-dnd';
 import { NativeTypes } from 'react-dnd-html5-backend';
 
 import {
   fetchMessagesBeforeCursorActionTypes,
   fetchMessagesBeforeCursor,
   fetchMostRecentMessagesActionTypes,
 } from 'lib/actions/message-actions';
 import { registerFetchKey } from 'lib/reducers/loading-reducer';
 import {
   type ChatMessageItem,
   useMessageListData,
 } from 'lib/selectors/chat-selectors';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import { messageKey } from 'lib/shared/message-utils';
 import { useWatchThread, useCurrentThreadInfo } from 'lib/shared/thread-utils';
 import type { FetchMessageInfosPayload } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 import { type InputState, InputStateContext } from '../input/input-state';
 import LoadingIndicator from '../loading-indicator.react';
 import { useTextMessageRulesFunc } from '../markdown/rules.react';
 import { useSelector } from '../redux/redux-utils';
 import ChatInputBar from './chat-input-bar.react';
 import css from './chat-message-list.css';
 import { MessageListContext } from './message-list-types';
 import MessageTimestampTooltip from './message-timestamp-tooltip.react';
 import Message from './message.react';
 import type {
   OnMessagePositionWithContainerInfo,
   MessagePositionInfo,
 } from './position-types';
 
 type BaseProps = {|
   +setModal: (modal: ?React.Node) => void,
 |};
 type PassedProps = {|
   ...BaseProps,
   // Redux state
   +activeChatThreadID: ?string,
   +threadInfo: ?ThreadInfo,
   +messageListData: ?$ReadOnlyArray<ChatMessageItem>,
   +startReached: boolean,
   +timeZone: ?string,
   +supportsReverseFlex: boolean,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +fetchMessagesBeforeCursor: (
     threadID: string,
     beforeMessageID: string,
   ) => Promise<FetchMessageInfosPayload>,
   // withInputState
   +inputState: ?InputState,
 |};
 type ReactDnDProps = {|
   isActive: boolean,
   connectDropTarget: (node: React.Node) => React.Node,
 |};
 type Props = {|
   ...PassedProps,
   ...ReactDnDProps,
 |};
 type State = {|
   +mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
 |};
 type Snapshot = {|
   +scrollTop: number,
   +scrollHeight: number,
 |};
 class ChatMessageList extends React.PureComponent<Props, State> {
   state: State = {
     mouseOverMessagePosition: null,
   };
   container: ?HTMLDivElement;
   messageContainer: ?HTMLDivElement;
   loadingFromScroll = false;
 
   componentDidMount() {
     this.scrollToBottom();
   }
 
   getSnapshotBeforeUpdate(prevProps: Props) {
     if (
       ChatMessageList.hasNewMessage(this.props, prevProps) &&
       this.messageContainer
     ) {
       const { scrollTop, scrollHeight } = this.messageContainer;
       return { scrollTop, scrollHeight };
     }
     return null;
   }
 
   static hasNewMessage(props: Props, prevProps: Props) {
     const { messageListData } = props;
     if (!messageListData || messageListData.length === 0) {
       return false;
     }
     const prevMessageListData = prevProps.messageListData;
     if (!prevMessageListData || prevMessageListData.length === 0) {
       return true;
     }
     return (
       ChatMessageList.keyExtractor(prevMessageListData[0]) !==
       ChatMessageList.keyExtractor(messageListData[0])
     );
   }
 
   componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) {
     const { messageListData } = this.props;
     const prevMessageListData = prevProps.messageListData;
 
     if (
       this.loadingFromScroll &&
       messageListData &&
       (!prevMessageListData ||
         messageListData.length > prevMessageListData.length ||
         this.props.startReached)
     ) {
       this.loadingFromScroll = false;
     }
 
     const { messageContainer } = this;
     if (messageContainer && prevMessageListData !== messageListData) {
       this.onScroll();
     }
 
     // We'll scroll to the bottom if the user was already scrolled to the bottom
     // before the new message, or if the new message was composed locally
     const hasNewMessage = ChatMessageList.hasNewMessage(this.props, prevProps);
     if (
       this.props.activeChatThreadID !== prevProps.activeChatThreadID ||
       (hasNewMessage &&
         messageListData &&
         messageListData[0].itemType === 'message' &&
         messageListData[0].messageInfo.localID) ||
       (hasNewMessage && snapshot && Math.abs(snapshot.scrollTop) <= 1)
     ) {
       this.scrollToBottom();
     } else if (hasNewMessage && messageContainer && snapshot) {
       const { scrollTop, scrollHeight } = messageContainer;
       if (
         scrollHeight > snapshot.scrollHeight &&
         scrollTop === snapshot.scrollTop
       ) {
         const newHeight = scrollHeight - snapshot.scrollHeight;
         const newScrollTop = Math.abs(scrollTop) + newHeight;
         if (this.props.supportsReverseFlex) {
           messageContainer.scrollTop = -1 * newScrollTop;
         } else {
           messageContainer.scrollTop = newScrollTop;
         }
       }
     }
   }
 
   scrollToBottom() {
     if (this.messageContainer) {
       this.messageContainer.scrollTop = 0;
     }
   }
 
   static keyExtractor(item: ChatMessageItem) {
     if (item.itemType === 'loader') {
       return 'loader';
     }
     return messageKey(item.messageInfo);
   }
 
   renderItem = (item) => {
     if (item.itemType === 'loader') {
       return (
         <div key="loader" className={css.loading}>
           <LoadingIndicator status="loading" size="large" color="black" />
         </div>
       );
     }
     const { threadInfo, setModal } = this.props;
     invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
     return (
       <Message
         item={item}
         threadInfo={threadInfo}
         setMouseOverMessagePosition={this.setMouseOverMessagePosition}
         mouseOverMessagePosition={this.state.mouseOverMessagePosition}
         setModal={setModal}
         timeZone={this.props.timeZone}
         key={ChatMessageList.keyExtractor(item)}
       />
     );
   };
 
   setMouseOverMessagePosition = (messagePositionInfo: MessagePositionInfo) => {
     if (!this.messageContainer) {
       return;
     }
     if (messagePositionInfo.type === 'off') {
       this.setState({ mouseOverMessagePosition: null });
       return;
     }
     const {
       top: containerTop,
       bottom: containerBottom,
       left: containerLeft,
       right: containerRight,
       height: containerHeight,
       width: containerWidth,
     } = this.messageContainer.getBoundingClientRect();
     const mouseOverMessagePosition = {
       ...messagePositionInfo,
       messagePosition: {
         ...messagePositionInfo.messagePosition,
         top: messagePositionInfo.messagePosition.top - containerTop,
         bottom: messagePositionInfo.messagePosition.bottom - containerTop,
         left: messagePositionInfo.messagePosition.left - containerLeft,
         right: messagePositionInfo.messagePosition.right - containerLeft,
       },
       containerPosition: {
         top: containerTop,
         bottom: containerBottom,
         left: containerLeft,
         right: containerRight,
         height: containerHeight,
         width: containerWidth,
       },
     };
     this.setState({ mouseOverMessagePosition });
   };
 
   render() {
     const {
       messageListData,
       threadInfo,
       inputState,
       connectDropTarget,
       isActive,
     } = this.props;
     if (!messageListData) {
       return <div className={css.container} />;
     }
     invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
     invariant(inputState, 'InputState should be set');
     const messages = messageListData.map(this.renderItem);
     const containerStyle = classNames({
       [css.container]: true,
       [css.activeContainer]: isActive,
     });
 
     let tooltip;
     if (this.state.mouseOverMessagePosition) {
       const messagePositionInfo = this.state.mouseOverMessagePosition;
       tooltip = (
         <MessageTimestampTooltip
           messagePositionInfo={messagePositionInfo}
           timeZone={this.props.timeZone}
         />
       );
     }
 
     const messageContainerStyle = classNames({
       [css.messageContainer]: true,
       [css.mirroredMessageContainer]: !this.props.supportsReverseFlex,
     });
     return connectDropTarget(
       <div className={containerStyle} ref={this.containerRef}>
         <div className={css.outerMessageContainer}>
           <div className={messageContainerStyle} ref={this.messageContainerRef}>
             {messages}
           </div>
           {tooltip}
         </div>
         <ChatInputBar threadInfo={threadInfo} inputState={inputState} />
       </div>,
     );
   }
 
   containerRef = (container: ?HTMLDivElement) => {
     if (container) {
       container.addEventListener('paste', this.onPaste);
     }
     this.container = container;
   };
 
   onPaste = (e: ClipboardEvent) => {
     const { inputState } = this.props;
     if (!inputState) {
       return;
     }
     const { clipboardData } = e;
     if (!clipboardData) {
       return;
     }
     const { files } = clipboardData;
     if (files.length === 0) {
       return;
     }
     e.preventDefault();
     inputState.appendFiles([...files]);
   };
 
   messageContainerRef = (messageContainer: ?HTMLDivElement) => {
     this.messageContainer = messageContainer;
     // In case we already have all the most recent messages,
     // but they're not enough
     this.possiblyLoadMoreMessages();
     if (messageContainer) {
       messageContainer.addEventListener('scroll', this.onScroll);
     }
   };
 
   onScroll = () => {
     if (!this.messageContainer) {
       return;
     }
     if (this.state.mouseOverMessagePosition) {
       this.setState({ mouseOverMessagePosition: null });
     }
     this.possiblyLoadMoreMessages();
   };
 
   possiblyLoadMoreMessages() {
     if (!this.messageContainer) {
       return;
     }
     const { scrollTop, scrollHeight, clientHeight } = this.messageContainer;
     if (
       this.props.startReached ||
       Math.abs(scrollTop) + clientHeight + 55 < scrollHeight
     ) {
       return;
     }
     const oldestMessageServerID = this.oldestMessageServerID();
     if (!oldestMessageServerID) {
       return;
     }
     if (this.loadingFromScroll) {
       return;
     }
     this.loadingFromScroll = true;
     const threadID = this.props.activeChatThreadID;
     invariant(threadID, 'should be set');
     this.props.dispatchActionPromise(
       fetchMessagesBeforeCursorActionTypes,
       this.props.fetchMessagesBeforeCursor(threadID, oldestMessageServerID),
     );
   }
 
   oldestMessageServerID(): ?string {
     const data = this.props.messageListData;
     invariant(data, 'should be set');
     for (let i = data.length - 1; i >= 0; i--) {
       if (data[i].itemType === 'message' && data[i].messageInfo.id) {
         return data[i].messageInfo.id;
       }
     }
     return null;
   }
 }
 
 registerFetchKey(fetchMessagesBeforeCursorActionTypes);
 registerFetchKey(fetchMostRecentMessagesActionTypes);
 
 export default React.memo<BaseProps>(function ConnectedChatMessageList(
   props: BaseProps,
 ) {
   const userAgent = useSelector((state) => state.userAgent);
   const supportsReverseFlex = React.useMemo(() => {
     const browser = detectBrowser(userAgent);
     return (
       !browser || browser.name !== 'firefox' || parseInt(browser.version) >= 81
     );
   }, [userAgent]);
 
   const timeZone = useSelector((state) => state.timeZone);
 
   const activeChatThreadID = useSelector(
     (state) => state.navInfo.activeChatThreadID,
   );
   const baseThreadInfo = useSelector((state) => {
     const activeID = state.navInfo.activeChatThreadID;
     if (!activeID) {
       return null;
     }
     return threadInfoSelector(state)[activeID] ?? state.navInfo.pendingThread;
   });
   const sourceMessageID = useSelector((state) => state.navInfo.sourceMessageID);
   const threadInfo = useCurrentThreadInfo({
     baseThreadInfo,
     searching: false,
     userInfoInputArray: [],
-    sourceMessageID,
   });
 
   const messageListData = useMessageListData({
     sourceMessageID,
     searching: false,
     userInfoInputArray: [],
     threadInfo,
   });
 
   const startReached = useSelector((state) => {
     const activeID = state.navInfo.activeChatThreadID;
     if (!activeID) {
       return null;
     }
 
     if (state.navInfo.pendingThread) {
       return true;
     }
 
     const threadMessageInfo = state.messageStore.threads[activeID];
     if (!threadMessageInfo) {
       return null;
     }
     return threadMessageInfo.startReached;
   });
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callFetchMessagesBeforeCursor = useServerCall(
     fetchMessagesBeforeCursor,
   );
 
   const inputState = React.useContext(InputStateContext);
   const [dndProps, connectDropTarget] = useDrop({
     accept: NativeTypes.FILE,
     drop: (item) => {
       const { files } = item;
       if (inputState && files.length > 0) {
         inputState.appendFiles(files);
       }
     },
     collect: (monitor) => ({
       isActive: monitor.isOver() && monitor.canDrop(),
     }),
   });
 
   const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo?.id);
   const messageListContext = React.useMemo(() => {
     if (!getTextMessageMarkdownRules) {
       return undefined;
     }
     return { getTextMessageMarkdownRules };
   }, [getTextMessageMarkdownRules]);
 
   useWatchThread(threadInfo);
 
   return (
     <MessageListContext.Provider value={messageListContext}>
       <ChatMessageList
         {...props}
         activeChatThreadID={activeChatThreadID}
         threadInfo={threadInfo}
         messageListData={messageListData}
         startReached={startReached}
         timeZone={timeZone}
         supportsReverseFlex={supportsReverseFlex}
         inputState={inputState}
         dispatchActionPromise={dispatchActionPromise}
         fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
         {...dndProps}
         connectDropTarget={connectDropTarget}
       />
     </MessageListContext.Provider>
   );
 });