diff --git a/lib/selectors/chat-selectors.js b/lib/selectors/chat-selectors.js
index 7ad429939..27a56d209 100644
--- a/lib/selectors/chat-selectors.js
+++ b/lib/selectors/chat-selectors.js
@@ -1,693 +1,693 @@
 // @flow
 
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter.js';
 import _flow from 'lodash/fp/flow.js';
 import _map from 'lodash/fp/map.js';
 import _orderBy from 'lodash/fp/orderBy.js';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import { createObjectSelector } from 'reselect-map';
 
 import {
   threadInfoSelector,
   sidebarInfoSelector,
   threadInfoFromSourceMessageIDSelector,
 } from './thread-selectors.js';
 import {
   messageKey,
   robotextForMessageInfo,
   createMessageInfo,
   getMostRecentNonLocalMessageID,
   sortMessageInfoList,
 } from '../shared/message-utils.js';
 import {
   threadIsPending,
   threadIsTopLevel,
   threadInChatList,
 } from '../shared/thread-utils.js';
 import { messageTypes } from '../types/message-types-enum.js';
 import {
   type MessageInfo,
   type MessageStore,
   type ComposableMessageInfo,
   type RobotextMessageInfo,
   type LocalMessageInfo,
   isComposableMessageType,
 } from '../types/message-types.js';
 import type { BaseAppState } from '../types/redux-types.js';
 import { threadTypes } from '../types/thread-types-enum.js';
 import {
   type ThreadInfo,
   type RawThreadInfo,
   type SidebarInfo,
   maxReadSidebars,
   maxUnreadSidebars,
 } from '../types/thread-types.js';
 import type {
   UserInfo,
   AccountUserInfo,
   RelativeUserInfo,
 } from '../types/user-types.js';
 import { threeDays } from '../utils/date-utils.js';
 import type { EntityText } from '../utils/entity-text.js';
 import memoize2 from '../utils/memoize.js';
 
 export type SidebarItem =
   | {
       ...SidebarInfo,
       +type: 'sidebar',
     }
   | {
       +type: 'seeMore',
       +unread: boolean,
     }
   | { +type: 'spacer' };
 
 export type ChatThreadItem = {
   +type: 'chatThreadItem',
   +threadInfo: ThreadInfo,
   +mostRecentMessageInfo: ?MessageInfo,
   +mostRecentNonLocalMessage: ?string,
   +lastUpdatedTime: number,
   +lastUpdatedTimeIncludingSidebars: number,
   +sidebars: $ReadOnlyArray<SidebarItem>,
   +pendingPersonalThreadUserInfo?: UserInfo,
 };
 
 const messageInfoSelector: (state: BaseAppState<>) => {
   +[id: string]: ?MessageInfo,
 } = createObjectSelector(
   (state: BaseAppState<>) => state.messageStore.messages,
   (state: BaseAppState<>) => state.currentUserInfo && state.currentUserInfo.id,
   (state: BaseAppState<>) => state.userStore.userInfos,
   threadInfoSelector,
   createMessageInfo,
 );
 
 function isEmptyMediaMessage(messageInfo: MessageInfo): boolean {
   return (
     (messageInfo.type === messageTypes.MULTIMEDIA ||
       messageInfo.type === messageTypes.IMAGES) &&
     messageInfo.media.length === 0
   );
 }
 
 function getMostRecentMessageInfo(
   threadInfo: ThreadInfo,
   messageStore: MessageStore,
   messages: { +[id: string]: ?MessageInfo },
 ): ?MessageInfo {
   const thread = messageStore.threads[threadInfo.id];
   if (!thread) {
     return null;
   }
   for (const messageID of thread.messageIDs) {
     const messageInfo = messages[messageID];
     if (!messageInfo || isEmptyMediaMessage(messageInfo)) {
       continue;
     }
     return messageInfo;
   }
   return null;
 }
 
 function getLastUpdatedTime(
   threadInfo: ThreadInfo,
   mostRecentMessageInfo: ?MessageInfo,
 ): number {
   return mostRecentMessageInfo
     ? mostRecentMessageInfo.time
     : threadInfo.creationTime;
 }
 
 function createChatThreadItem(
   threadInfo: ThreadInfo,
   messageStore: MessageStore,
   messages: { +[id: string]: ?MessageInfo },
   sidebarInfos: ?$ReadOnlyArray<SidebarInfo>,
 ): ChatThreadItem {
   const mostRecentMessageInfo = getMostRecentMessageInfo(
     threadInfo,
     messageStore,
     messages,
   );
   const mostRecentNonLocalMessage = getMostRecentNonLocalMessageID(
     threadInfo.id,
     messageStore,
   );
   const lastUpdatedTime = getLastUpdatedTime(threadInfo, mostRecentMessageInfo);
 
   const sidebars = sidebarInfos ?? [];
   const allSidebarItems = sidebars.map(sidebarInfo => ({
     type: 'sidebar',
     ...sidebarInfo,
   }));
   const lastUpdatedTimeIncludingSidebars =
     allSidebarItems.length > 0
       ? Math.max(lastUpdatedTime, allSidebarItems[0].lastUpdatedTime)
       : lastUpdatedTime;
 
   const numUnreadSidebars = allSidebarItems.filter(
     sidebar => sidebar.threadInfo.currentUser.unread,
   ).length;
   let numReadSidebarsToShow = maxReadSidebars - numUnreadSidebars;
   const threeDaysAgo = Date.now() - threeDays;
 
   const sidebarItems = [];
   for (const sidebar of allSidebarItems) {
     if (sidebarItems.length >= maxUnreadSidebars) {
       break;
     } else if (sidebar.threadInfo.currentUser.unread) {
       sidebarItems.push(sidebar);
     } else if (
       sidebar.lastUpdatedTime > threeDaysAgo &&
       numReadSidebarsToShow > 0
     ) {
       sidebarItems.push(sidebar);
       numReadSidebarsToShow--;
     }
   }
 
   const numReadButRecentSidebars = allSidebarItems.filter(
     sidebar =>
       !sidebar.threadInfo.currentUser.unread &&
       sidebar.lastUpdatedTime > threeDaysAgo,
   ).length;
   if (
     sidebarItems.length < numUnreadSidebars + numReadButRecentSidebars ||
     (sidebarItems.length < allSidebarItems.length && sidebarItems.length > 0)
   ) {
     sidebarItems.push({
       type: 'seeMore',
       unread: numUnreadSidebars > maxUnreadSidebars,
     });
   }
   if (sidebarItems.length !== 0) {
     sidebarItems.push({
       type: 'spacer',
     });
   }
 
   return {
     type: 'chatThreadItem',
     threadInfo,
     mostRecentMessageInfo,
     mostRecentNonLocalMessage,
     lastUpdatedTime,
     lastUpdatedTimeIncludingSidebars,
     sidebars: sidebarItems,
   };
 }
 
 const chatListData: (state: BaseAppState<>) => $ReadOnlyArray<ChatThreadItem> =
   createSelector(
     threadInfoSelector,
     (state: BaseAppState<>) => state.messageStore,
     messageInfoSelector,
     sidebarInfoSelector,
     (
       threadInfos: { +[id: string]: ThreadInfo },
       messageStore: MessageStore,
       messageInfos: { +[id: string]: ?MessageInfo },
       sidebarInfos: { +[id: string]: $ReadOnlyArray<SidebarInfo> },
     ): $ReadOnlyArray<ChatThreadItem> =>
       getChatThreadItems(
         threadInfos,
         messageStore,
         messageInfos,
         sidebarInfos,
         threadIsTopLevel,
       ),
   );
 
 function useFlattenedChatListData(): $ReadOnlyArray<ChatThreadItem> {
   return useFilteredChatListData(threadInChatList);
 }
 
 function useFilteredChatListData(
   filterFunction: (threadInfo: ?(ThreadInfo | RawThreadInfo)) => boolean,
 ): $ReadOnlyArray<ChatThreadItem> {
   const threadInfos = useSelector(threadInfoSelector);
   const messageInfos = useSelector(messageInfoSelector);
   const sidebarInfos = useSelector(sidebarInfoSelector);
   const messageStore = useSelector(state => state.messageStore);
 
   return React.useMemo(
     () =>
       getChatThreadItems(
         threadInfos,
         messageStore,
         messageInfos,
         sidebarInfos,
         filterFunction,
       ),
     [messageInfos, messageStore, sidebarInfos, filterFunction, threadInfos],
   );
 }
 
 function getChatThreadItems(
   threadInfos: { +[id: string]: ThreadInfo },
   messageStore: MessageStore,
   messageInfos: { +[id: string]: ?MessageInfo },
   sidebarInfos: { +[id: string]: $ReadOnlyArray<SidebarInfo> },
   filterFunction: (threadInfo: ?(ThreadInfo | RawThreadInfo)) => boolean,
 ): $ReadOnlyArray<ChatThreadItem> {
   return _flow(
     _filter(filterFunction),
     _map((threadInfo: ThreadInfo): ChatThreadItem =>
       createChatThreadItem(
         threadInfo,
         messageStore,
         messageInfos,
         sidebarInfos[threadInfo.id],
       ),
     ),
     _orderBy('lastUpdatedTimeIncludingSidebars')('desc'),
   )(threadInfos);
 }
 
 export type RobotextChatMessageInfoItem = {
   +itemType: 'message',
   +messageInfoType: 'robotext',
   +messageInfo: RobotextMessageInfo,
   +startsConversation: boolean,
   +startsCluster: boolean,
   endsCluster: boolean,
   +robotext: EntityText,
   +threadCreatedFromMessage: ?ThreadInfo,
   +reactions: ReactionInfo,
 };
 export type ChatMessageInfoItem =
   | RobotextChatMessageInfoItem
   | {
       +itemType: 'message',
       +messageInfoType: 'composable',
       +messageInfo: ComposableMessageInfo,
       +localMessageInfo: ?LocalMessageInfo,
       +startsConversation: boolean,
       +startsCluster: boolean,
       endsCluster: boolean,
       +threadCreatedFromMessage: ?ThreadInfo,
       +reactions: ReactionInfo,
       +hasBeenEdited: boolean,
       +isPinned: boolean,
     };
 export type ChatMessageItem = { itemType: 'loader' } | ChatMessageInfoItem;
 
 export type ReactionInfo = { +[reaction: string]: MessageReactionInfo };
 type MessageReactionInfo = {
   +viewerReacted: boolean,
   +users: $ReadOnlyArray<RelativeUserInfo>,
 };
 type TargetMessageReactions = Map<string, Map<string, RelativeUserInfo>>;
 
 const msInFiveMinutes = 5 * 60 * 1000;
 function createChatMessageItems(
   threadID: string,
   messageStore: MessageStore,
   messageInfos: { +[id: string]: ?MessageInfo },
   threadInfos: { +[id: string]: ThreadInfo },
   threadInfoFromSourceMessageID: { +[id: string]: ThreadInfo },
   additionalMessages: $ReadOnlyArray<MessageInfo>,
   viewerID: string,
 ): ChatMessageItem[] {
   const thread = messageStore.threads[threadID];
 
   const threadMessageInfos = (thread?.messageIDs ?? [])
     .map((messageID: string) => messageInfos[messageID])
     .filter(Boolean);
   const messages =
     additionalMessages.length > 0
       ? sortMessageInfoList([...threadMessageInfos, ...additionalMessages])
       : threadMessageInfos;
 
   const targetMessageReactionsMap = new Map<string, TargetMessageReactions>();
 
   // We need to iterate backwards to put the order of messages in chronological
   // order, starting with the oldest. This avoids the scenario where the most
   // recent message with the remove_reaction action may try to remove a user
   // that hasn't been added to the messageReactionUsersInfoMap, causing it
   // to be skipped.
   for (let i = messages.length - 1; i >= 0; i--) {
     const messageInfo = messages[i];
     if (messageInfo.type !== messageTypes.REACTION) {
       continue;
     }
 
     if (!targetMessageReactionsMap.has(messageInfo.targetMessageID)) {
       const reactsMap: TargetMessageReactions = new Map();
       targetMessageReactionsMap.set(messageInfo.targetMessageID, reactsMap);
     }
 
     const messageReactsMap = targetMessageReactionsMap.get(
       messageInfo.targetMessageID,
     );
     invariant(messageReactsMap, 'messageReactsInfo should be set');
 
     if (!messageReactsMap.has(messageInfo.reaction)) {
       const usersInfoMap = new Map<string, RelativeUserInfo>();
       messageReactsMap.set(messageInfo.reaction, usersInfoMap);
     }
 
     const messageReactionUsersInfoMap = messageReactsMap.get(
       messageInfo.reaction,
     );
     invariant(
       messageReactionUsersInfoMap,
       'messageReactionUsersInfoMap should be set',
     );
 
     if (messageInfo.action === 'add_reaction') {
       messageReactionUsersInfoMap.set(
         messageInfo.creator.id,
         messageInfo.creator,
       );
     } else {
       messageReactionUsersInfoMap.delete(messageInfo.creator.id);
     }
   }
 
   const targetMessageEditMap = new Map<string, string>();
   for (let i = messages.length - 1; i >= 0; i--) {
     const messageInfo = messages[i];
     if (messageInfo.type !== messageTypes.EDIT_MESSAGE) {
       continue;
     }
     targetMessageEditMap.set(messageInfo.targetMessageID, messageInfo.text);
   }
 
   const targetMessagePinStatusMap = new Map<string, boolean>();
   // Once again, we iterate backwards to put the order of messages in
   // chronological order (i.e. oldest to newest) to handle pinned messages.
   // This is important because we want to make sure that the most recent pin
   // action is the one that is used to determine whether a message
   // is pinned or not.
   for (let i = messages.length - 1; i >= 0; i--) {
     const messageInfo = messages[i];
     if (messageInfo.type !== messageTypes.TOGGLE_PIN) {
       continue;
     }
 
     targetMessagePinStatusMap.set(
       messageInfo.targetMessageID,
       messageInfo.action === 'pin',
     );
   }
 
   const chatMessageItems = [];
   let lastMessageInfo = null;
   for (let i = messages.length - 1; i >= 0; i--) {
     const messageInfo = messages[i];
 
     if (
       messageInfo.type === messageTypes.REACTION ||
       messageInfo.type === messageTypes.EDIT_MESSAGE
     ) {
       continue;
     }
 
     let originalMessageInfo =
       messageInfo.type === messageTypes.SIDEBAR_SOURCE
         ? messageInfo.sourceMessage
         : messageInfo;
 
     if (isEmptyMediaMessage(originalMessageInfo)) {
       continue;
     }
 
     let hasBeenEdited = false;
     if (
       originalMessageInfo.type === messageTypes.TEXT &&
       originalMessageInfo.id
     ) {
       const newText = targetMessageEditMap.get(originalMessageInfo.id);
       if (newText !== undefined) {
         hasBeenEdited = true;
         originalMessageInfo = {
           ...originalMessageInfo,
           text: newText,
         };
       }
     }
 
     let startsConversation = true;
     let startsCluster = true;
     if (
       lastMessageInfo &&
       lastMessageInfo.time + msInFiveMinutes > originalMessageInfo.time
     ) {
       startsConversation = false;
       if (
         isComposableMessageType(lastMessageInfo.type) &&
         isComposableMessageType(originalMessageInfo.type) &&
         lastMessageInfo.creator.id === originalMessageInfo.creator.id
       ) {
         startsCluster = false;
       }
     }
     if (startsCluster && chatMessageItems.length > 0) {
       const lastMessageItem = chatMessageItems[chatMessageItems.length - 1];
       invariant(lastMessageItem.itemType === 'message', 'should be message');
       lastMessageItem.endsCluster = true;
     }
     const threadCreatedFromMessage =
       messageInfo.id && threadInfos[threadID]?.type !== threadTypes.SIDEBAR
         ? threadInfoFromSourceMessageID[messageInfo.id]
         : undefined;
 
     const isPinned = !!(
       originalMessageInfo.id &&
       targetMessagePinStatusMap.get(originalMessageInfo.id)
     );
 
     const renderedReactions: ReactionInfo = (() => {
       const result = {};
 
       let messageReactsMap;
       if (originalMessageInfo.id) {
         messageReactsMap = targetMessageReactionsMap.get(
           originalMessageInfo.id,
         );
       }
 
       if (!messageReactsMap) {
         return result;
       }
 
       for (const reaction of messageReactsMap.keys()) {
         const reactionUsersInfoMap = messageReactsMap.get(reaction);
         invariant(reactionUsersInfoMap, 'reactionUsersInfoMap should be set');
 
         if (reactionUsersInfoMap.size === 0) {
           continue;
         }
 
         const reactionUserInfos = [...reactionUsersInfoMap.values()];
 
         const messageReactionInfo = {
           users: reactionUserInfos,
           viewerReacted: reactionUsersInfoMap.has(viewerID),
         };
 
         result[reaction] = messageReactionInfo;
       }
 
       return result;
     })();
 
     if (isComposableMessageType(originalMessageInfo.type)) {
       // We use these invariants instead of just checking the messageInfo.type
       // directly in the conditional above so that isComposableMessageType can
       // be the source of truth
       invariant(
         originalMessageInfo.type === messageTypes.TEXT ||
           originalMessageInfo.type === messageTypes.IMAGES ||
           originalMessageInfo.type === messageTypes.MULTIMEDIA,
         "Flow doesn't understand isComposableMessageType above",
       );
       const localMessageInfo =
         messageStore.local[messageKey(originalMessageInfo)];
       chatMessageItems.push({
         itemType: 'message',
         messageInfoType: 'composable',
         messageInfo: originalMessageInfo,
         localMessageInfo,
         startsConversation,
         startsCluster,
         endsCluster: false,
         threadCreatedFromMessage,
         reactions: renderedReactions,
         hasBeenEdited,
         isPinned,
       });
     } else {
       invariant(
         originalMessageInfo.type !== messageTypes.TEXT &&
           originalMessageInfo.type !== messageTypes.IMAGES &&
           originalMessageInfo.type !== messageTypes.MULTIMEDIA,
         "Flow doesn't understand isComposableMessageType above",
       );
       const robotext = robotextForMessageInfo(
         originalMessageInfo,
         threadInfos[threadID],
       );
       chatMessageItems.push({
         itemType: 'message',
         messageInfoType: 'robotext',
         messageInfo: originalMessageInfo,
         startsConversation,
         startsCluster,
         endsCluster: false,
         threadCreatedFromMessage,
         robotext,
         reactions: renderedReactions,
       });
     }
     lastMessageInfo = originalMessageInfo;
   }
   if (chatMessageItems.length > 0) {
     const lastMessageItem = chatMessageItems[chatMessageItems.length - 1];
     invariant(lastMessageItem.itemType === 'message', 'should be message');
     lastMessageItem.endsCluster = true;
   }
   chatMessageItems.reverse();
   const hideSpinner = thread ? thread.startReached : threadIsPending(threadID);
   if (hideSpinner) {
     return chatMessageItems;
   }
   return [...chatMessageItems, ({ itemType: 'loader' }: ChatMessageItem)];
 }
 
 const baseMessageListData = (
   threadID: ?string,
   additionalMessages: $ReadOnlyArray<MessageInfo>,
 ) =>
   createSelector(
     (state: BaseAppState<>) => state.messageStore,
     messageInfoSelector,
     threadInfoSelector,
     threadInfoFromSourceMessageIDSelector,
     (state: BaseAppState<>) =>
       state.currentUserInfo && state.currentUserInfo.id,
     (
       messageStore: MessageStore,
       messageInfos: { +[id: string]: ?MessageInfo },
       threadInfos: { +[id: string]: ThreadInfo },
       threadInfoFromSourceMessageID: { +[id: string]: ThreadInfo },
       viewerID: ?string,
     ): ?(ChatMessageItem[]) => {
       if (!threadID || !viewerID) {
         return null;
       }
       return createChatMessageItems(
         threadID,
         messageStore,
         messageInfos,
         threadInfos,
         threadInfoFromSourceMessageID,
         additionalMessages,
         viewerID,
       );
     },
   );
-type MessageListData = ?(ChatMessageItem[]);
+export type MessageListData = ?(ChatMessageItem[]);
 const messageListData: (
   threadID: ?string,
   additionalMessages: $ReadOnlyArray<MessageInfo>,
 ) => (state: BaseAppState<>) => MessageListData = memoize2(baseMessageListData);
 
 export type UseMessageListDataArgs = {
   +searching: boolean,
   +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
   +threadInfo: ?ThreadInfo,
 };
 
 function useMessageListData({
   searching,
   userInfoInputArray,
   threadInfo,
 }: UseMessageListDataArgs): MessageListData {
   const messageInfos = useSelector(messageInfoSelector);
 
   const containingThread = useSelector(state => {
     if (!threadInfo || threadInfo.type !== threadTypes.SIDEBAR) {
       return null;
     }
     return state.messageStore.threads[threadInfo.containingThreadID];
   });
 
   const pendingSidebarEditMessageInfo = React.useMemo(() => {
     const sourceMessageID = threadInfo?.sourceMessageID;
     const threadMessageInfos = (containingThread?.messageIDs ?? [])
       .map((messageID: string) => messageInfos[messageID])
       .filter(Boolean)
       .filter(
         message =>
           message.type === messageTypes.EDIT_MESSAGE &&
           message.targetMessageID === sourceMessageID,
       );
     if (threadMessageInfos.length === 0) {
       return null;
     }
     return threadMessageInfos[0];
   }, [threadInfo, containingThread, messageInfos]);
 
   const pendingSidebarSourceMessageInfo = useSelector(state => {
     const sourceMessageID = threadInfo?.sourceMessageID;
     if (
       !threadInfo ||
       threadInfo.type !== threadTypes.SIDEBAR ||
       !sourceMessageID
     ) {
       return null;
     }
     const thread = state.messageStore.threads[threadInfo.id];
     const shouldSourceBeAdded =
       !thread ||
       (thread.startReached &&
         thread.messageIDs.every(
           id => messageInfos[id]?.type !== messageTypes.SIDEBAR_SOURCE,
         ));
     return shouldSourceBeAdded ? messageInfos[sourceMessageID] : null;
   });
 
   invariant(
     !pendingSidebarSourceMessageInfo ||
       pendingSidebarSourceMessageInfo.type !== messageTypes.SIDEBAR_SOURCE,
     'sidebars can not be created from sidebar_source message',
   );
 
   const additionalMessages = React.useMemo(() => {
     if (!pendingSidebarSourceMessageInfo) {
       return [];
     }
     const result = [pendingSidebarSourceMessageInfo];
     if (pendingSidebarEditMessageInfo) {
       result.push(pendingSidebarEditMessageInfo);
     }
     return result;
   }, [pendingSidebarSourceMessageInfo, pendingSidebarEditMessageInfo]);
   const boundMessageListData = useSelector(
     messageListData(threadInfo?.id, additionalMessages),
   );
 
   return React.useMemo(() => {
     if (searching && userInfoInputArray.length === 0) {
       return [];
     }
     return boundMessageListData;
   }, [searching, userInfoInputArray.length, boundMessageListData]);
 }
 
 export {
   messageInfoSelector,
   createChatThreadItem,
   chatListData,
   createChatMessageItems,
   messageListData,
   useFlattenedChatListData,
   useFilteredChatListData,
   useMessageListData,
 };
diff --git a/lib/shared/search-utils.js b/lib/shared/search-utils.js
index 3030b2b25..6e927fb62 100644
--- a/lib/shared/search-utils.js
+++ b/lib/shared/search-utils.js
@@ -1,305 +1,346 @@
 // @flow
 
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 
 import SearchIndex from './search-index.js';
 import {
   userIsMember,
   threadMemberHasPermission,
   getContainingThreadID,
 } from './thread-utils.js';
 import {
   searchMessages,
   searchMessagesActionTypes,
 } from '../actions/message-actions.js';
 import {
   searchUsers,
   searchUsersActionTypes,
 } from '../actions/user-actions.js';
 import genesis from '../facts/genesis.js';
-import type { RawMessageInfo } from '../types/message-types.js';
+import type {
+  ChatMessageInfoItem,
+  MessageListData,
+} from '../selectors/chat-selectors';
+import type { MessageInfo, RawMessageInfo } from '../types/message-types';
+import { isComposableMessageType } from '../types/message-types.js';
 import { userRelationshipStatus } from '../types/relationship-types.js';
 import { threadPermissions } from '../types/thread-permission-types.js';
 import { type ThreadType, threadTypes } from '../types/thread-types-enum.js';
 import { type ThreadInfo } from '../types/thread-types.js';
 import type {
   AccountUserInfo,
   UserListItem,
   GlobalAccountUserInfo,
 } from '../types/user-types.js';
 import {
   useServerCall,
   useDispatchActionPromise,
 } from '../utils/action-utils.js';
 import { values } from '../utils/objects.js';
 
 const notFriendNotice = 'not friend';
 
 function getPotentialMemberItems({
   text,
   userInfos,
   searchIndex,
   excludeUserIDs,
   includeServerSearchUsers,
   inputParentThreadInfo,
   inputCommunityThreadInfo,
   threadType,
 }: {
   +text: string,
   +userInfos: { +[id: string]: AccountUserInfo },
   +searchIndex: SearchIndex,
   +excludeUserIDs: $ReadOnlyArray<string>,
   +includeServerSearchUsers?: $ReadOnlyArray<GlobalAccountUserInfo>,
   +inputParentThreadInfo?: ?ThreadInfo,
   +inputCommunityThreadInfo?: ?ThreadInfo,
   +threadType?: ?ThreadType,
 }): UserListItem[] {
   const communityThreadInfo =
     inputCommunityThreadInfo && inputCommunityThreadInfo.id !== genesis.id
       ? inputCommunityThreadInfo
       : null;
   const parentThreadInfo =
     inputParentThreadInfo && inputParentThreadInfo.id !== genesis.id
       ? inputParentThreadInfo
       : null;
 
   const containgThreadID = threadType
     ? getContainingThreadID(parentThreadInfo, threadType)
     : null;
 
   let containingThreadInfo = null;
   if (containgThreadID === parentThreadInfo?.id) {
     containingThreadInfo = parentThreadInfo;
   } else if (containgThreadID === communityThreadInfo?.id) {
     containingThreadInfo = communityThreadInfo;
   }
 
   const results: {
     [id: string]: {
       ...AccountUserInfo | GlobalAccountUserInfo,
       isMemberOfParentThread: boolean,
       isMemberOfContainingThread: boolean,
     },
   } = {};
   const appendUserInfo = (
     userInfo: AccountUserInfo | GlobalAccountUserInfo,
   ) => {
     const { id } = userInfo;
     if (excludeUserIDs.includes(id) || id in results) {
       return;
     }
     if (
       communityThreadInfo &&
       !threadMemberHasPermission(
         communityThreadInfo,
         id,
         threadPermissions.KNOW_OF,
       )
     ) {
       return;
     }
     results[id] = {
       ...userInfo,
       isMemberOfParentThread: userIsMember(parentThreadInfo, id),
       isMemberOfContainingThread: userIsMember(containingThreadInfo, id),
     };
   };
   if (text === '') {
     for (const id in userInfos) {
       appendUserInfo(userInfos[id]);
     }
   } else {
     const ids = searchIndex.getSearchResults(text);
     for (const id of ids) {
       appendUserInfo(userInfos[id]);
     }
   }
 
   if (includeServerSearchUsers) {
     for (const userInfo of includeServerSearchUsers) {
       appendUserInfo(userInfo);
     }
   }
 
   const blockedRelationshipsStatuses = new Set([
     userRelationshipStatus.BLOCKED_BY_VIEWER,
     userRelationshipStatus.BLOCKED_VIEWER,
     userRelationshipStatus.BOTH_BLOCKED,
   ]);
 
   let userResults = values(results);
   if (text === '') {
     userResults = userResults.filter(userInfo =>
       containingThreadInfo
         ? userInfo.isMemberOfContainingThread &&
           !blockedRelationshipsStatuses.has(userInfo.relationshipStatus)
         : userInfo?.relationshipStatus === userRelationshipStatus.FRIEND,
     );
   }
 
   const nonFriends = [];
   const blockedUsers = [];
   const friends = [];
   const containingThreadMembers = [];
   const parentThreadMembers = [];
 
   for (const userResult of userResults) {
     const relationshipStatus = userResult.relationshipStatus;
     if (blockedRelationshipsStatuses.has(relationshipStatus)) {
       blockedUsers.push(userResult);
     } else if (userResult.isMemberOfParentThread) {
       parentThreadMembers.push(userResult);
     } else if (userResult.isMemberOfContainingThread) {
       containingThreadMembers.push(userResult);
     } else if (relationshipStatus === userRelationshipStatus.FRIEND) {
       friends.push(userResult);
     } else {
       nonFriends.push(userResult);
     }
   }
 
   const sortedResults = parentThreadMembers
     .concat(containingThreadMembers)
     .concat(friends)
     .concat(nonFriends)
     .concat(blockedUsers);
 
   return sortedResults.map(
     ({
       isMemberOfContainingThread,
       isMemberOfParentThread,
       relationshipStatus,
       ...result
     }) => {
       let notice, alert;
       const username = result.username;
       if (blockedRelationshipsStatuses.has(relationshipStatus)) {
         notice = 'user is blocked';
         alert = {
           title: 'User is blocked',
           text:
             `Before you add ${username} to this chat, ` +
             'you’ll need to unblock them. You can do this from the Block List ' +
             'in the Profile tab.',
         };
       } else if (!isMemberOfContainingThread && containingThreadInfo) {
         if (threadType !== threadTypes.SIDEBAR) {
           notice = 'not in community';
           alert = {
             title: 'Not in community',
             text: 'You can only add members of the community to this chat',
           };
         } else {
           notice = 'not in parent chat';
           alert = {
             title: 'Not in parent chat',
             text: 'You can only add members of the parent chat to a thread',
           };
         }
       } else if (
         !containingThreadInfo &&
         relationshipStatus !== userRelationshipStatus.FRIEND
       ) {
         notice = notFriendNotice;
         alert = {
           title: 'Not a friend',
           text:
             `Before you add ${username} to this chat, ` +
             'you’ll need to send them a friend request. ' +
             'You can do this from the Friend List in the Profile tab.',
         };
       } else if (parentThreadInfo && !isMemberOfParentThread) {
         notice = 'not in parent chat';
       }
       if (notice) {
         result = { ...result, notice };
       }
       if (alert) {
         result = { ...result, alert };
       }
       return result;
     },
   );
 }
 
 function useSearchMessages(): (
   query: string,
   threadID: string,
   onResultsReceived: (
     messages: $ReadOnlyArray<RawMessageInfo>,
     endReached: boolean,
     queryID: number,
     threadID: string,
   ) => mixed,
   queryID: number,
   cursor?: string,
 ) => void {
   const callSearchMessages = useServerCall(searchMessages);
   const dispatchActionPromise = useDispatchActionPromise();
 
   return React.useCallback(
     (query, threadID, onResultsReceived, queryID, cursor) => {
       const searchMessagesPromise = (async () => {
         if (query === '') {
           onResultsReceived([], true, queryID, threadID);
           return;
         }
         const { messages, endReached } = await callSearchMessages({
           query,
           threadID,
           cursor,
         });
         onResultsReceived(messages, endReached, queryID, threadID);
       })();
 
       dispatchActionPromise(searchMessagesActionTypes, searchMessagesPromise);
     },
     [callSearchMessages, dispatchActionPromise],
   );
 }
 
 function useSearchUsers(
   usernameInputText: string,
 ): $ReadOnlyArray<GlobalAccountUserInfo> {
   const currentUserID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
 
   const [serverSearchResults, setServerSearchResults] = React.useState<
     $ReadOnlyArray<GlobalAccountUserInfo>,
   >([]);
   const callSearchUsers = useServerCall(searchUsers);
   const dispatchActionPromise = useDispatchActionPromise();
   React.useEffect(() => {
     const searchUsersPromise = (async () => {
       if (usernameInputText.length === 0) {
         setServerSearchResults([]);
       } else {
         try {
           const { userInfos } = await callSearchUsers(usernameInputText);
           setServerSearchResults(
             userInfos.filter(({ id }) => id !== currentUserID),
           );
         } catch (err) {
           setServerSearchResults([]);
         }
       }
     })();
     dispatchActionPromise(searchUsersActionTypes, searchUsersPromise);
   }, [
     callSearchUsers,
     currentUserID,
     dispatchActionPromise,
     usernameInputText,
   ]);
 
   return serverSearchResults;
 }
 
+function filterChatMessageInfosForSearch(
+  chatMessageInfos: MessageListData,
+  translatedSearchResults: $ReadOnlyArray<MessageInfo>,
+): ?(ChatMessageInfoItem[]) {
+  if (!chatMessageInfos) {
+    return null;
+  }
+
+  const idSet = new Set(translatedSearchResults.map(item => item.id));
+
+  const chatMessageInfoItems = chatMessageInfos.filter(
+    item =>
+      item.messageInfo &&
+      idSet.has(item.messageInfo.id) &&
+      isComposableMessageType(item.messageInfo.type),
+  );
+
+  const uniqueChatMessageInfoItemsMap = new Map();
+  chatMessageInfoItems.forEach(
+    item =>
+      item.messageInfo &&
+      item.messageInfo.id &&
+      uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
+  );
+
+  const sortedChatMessageInfoItems = [];
+  for (let i = 0; i < translatedSearchResults.length; i++) {
+    sortedChatMessageInfoItems.push(
+      uniqueChatMessageInfoItemsMap.get(translatedSearchResults[i].id),
+    );
+  }
+
+  return sortedChatMessageInfoItems.filter(Boolean);
+}
+
 export {
   getPotentialMemberItems,
   notFriendNotice,
   useSearchMessages,
   useSearchUsers,
+  filterChatMessageInfosForSearch,
 };
diff --git a/native/search/message-search.react.js b/native/search/message-search.react.js
index 68e6bf4cb..4dc241119 100644
--- a/native/search/message-search.react.js
+++ b/native/search/message-search.react.js
@@ -1,244 +1,226 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 
 import { messageListData } from 'lib/selectors/chat-selectors.js';
 import { createMessageInfo } from 'lib/shared/message-utils.js';
-import { useSearchMessages } from 'lib/shared/search-utils.js';
+import {
+  useSearchMessages,
+  filterChatMessageInfosForSearch,
+} from 'lib/shared/search-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import SearchFooter from './search-footer.react.js';
 import { MessageSearchContext } from './search-provider.react.js';
 import { useHeightMeasurer } from '../chat/chat-context.js';
 import type { ChatNavigationProp } from '../chat/chat.react.js';
 import { MessageListContextProvider } from '../chat/message-list-types.js';
 import MessageResult from '../chat/message-result.react.js';
 import ListLoadingIndicator from '../components/list-loading-indicator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import type { ChatMessageItemWithHeight } from '../types/chat-types.js';
 
 export type MessageSearchParams = {
   +threadInfo: ThreadInfo,
 };
 
 export type MessageSearchProps = {
   +navigation: ChatNavigationProp<'MessageSearch'>,
   +route: NavigationRoute<'MessageSearch'>,
 };
 
 function MessageSearch(props: MessageSearchProps): React.Node {
   const searchContext = React.useContext(MessageSearchContext);
   invariant(searchContext, 'searchContext should be set');
   const { query, clearQuery } = searchContext;
   const { threadInfo } = props.route.params;
 
   React.useEffect(() => {
     return props.navigation.addListener('beforeRemove', clearQuery);
   }, [props.navigation, clearQuery]);
 
   const [lastID, setLastID] = React.useState();
   const [searchResults, setSearchResults] = React.useState([]);
   const [endReached, setEndReached] = React.useState(false);
 
   const appendSearchResults = React.useCallback(
     (
       newMessages: $ReadOnlyArray<RawMessageInfo>,
       end: boolean,
       queryID: number,
     ) => {
       if (queryID !== queryIDRef.current) {
         return;
       }
       setSearchResults(oldMessages => [...oldMessages, ...newMessages]);
       setEndReached(end);
     },
     [],
   );
 
   const searchMessages = useSearchMessages();
 
   const queryIDRef = React.useRef(0);
 
   React.useEffect(() => {
     setSearchResults([]);
     setLastID(undefined);
     setEndReached(false);
   }, [query, searchMessages]);
 
   React.useEffect(() => {
     queryIDRef.current += 1;
     searchMessages(
       query,
       threadInfo.id,
       appendSearchResults,
       queryIDRef.current,
       lastID,
     );
   }, [appendSearchResults, lastID, query, searchMessages, threadInfo.id]);
 
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const translatedSearchResults = React.useMemo(() => {
     const threadInfos = { [threadInfo.id]: threadInfo };
     return searchResults
       .map(rawMessageInfo =>
         createMessageInfo(rawMessageInfo, null, userInfos, threadInfos),
       )
       .filter(Boolean);
   }, [searchResults, threadInfo, userInfos]);
 
   const chatMessageInfos = useSelector(
     messageListData(threadInfo.id, translatedSearchResults),
   );
 
   const filteredChatMessageInfos = React.useMemo(() => {
-    if (!chatMessageInfos) {
-      return null;
-    }
-
-    const idSet = new Set(translatedSearchResults.map(item => item.id));
-
-    const chatMessageInfoItems = chatMessageInfos.filter(
-      item => item.messageInfo && idSet.has(item.messageInfo.id),
-    );
-
-    const uniqueChatMessageInfoItemsMap = new Map();
-    chatMessageInfoItems.forEach(
-      item =>
-        item.messageInfo &&
-        item.messageInfo.id &&
-        uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
+    const result = filterChatMessageInfosForSearch(
+      chatMessageInfos,
+      translatedSearchResults,
     );
-
-    const sortedChatMessageInfoItems = [];
-    for (let i = 0; i < translatedSearchResults.length; i++) {
-      sortedChatMessageInfoItems.push(
-        uniqueChatMessageInfoItemsMap.get(translatedSearchResults[i].id),
-      );
+    if (result && !endReached) {
+      return [...result, { itemType: 'loader' }];
     }
-    if (!endReached) {
-      sortedChatMessageInfoItems.push({ itemType: 'loader' });
-    }
-
-    return sortedChatMessageInfoItems.filter(Boolean);
+    return result;
   }, [chatMessageInfos, endReached, translatedSearchResults]);
 
   const [measuredMessages, setMeasuredMessages] = React.useState([]);
 
   const measureMessages = useHeightMeasurer();
   const measureCallback = React.useCallback(
     (listDataWithHeights: $ReadOnlyArray<ChatMessageItemWithHeight>) => {
       setMeasuredMessages(listDataWithHeights);
     },
     [setMeasuredMessages],
   );
 
   React.useEffect(() => {
     measureMessages(filteredChatMessageInfos, threadInfo, measureCallback);
   }, [filteredChatMessageInfos, measureCallback, measureMessages, threadInfo]);
 
   const [messageVerticalBounds, setMessageVerticalBounds] = React.useState();
   const scrollViewContainerRef = React.useRef();
 
   const onLayout = React.useCallback(() => {
     scrollViewContainerRef.current?.measure(
       (x, y, width, height, pageX, pageY) => {
         if (
           height === null ||
           height === undefined ||
           pageY === null ||
           pageY === undefined
         ) {
           return;
         }
 
         setMessageVerticalBounds({ height, y: pageY });
       },
     );
   }, []);
 
   const renderItem = React.useCallback(
     ({ item }) => {
       if (item.itemType === 'loader') {
         return <ListLoadingIndicator />;
       }
       return (
         <MessageResult
           key={item.messageInfo.id}
           item={item}
           threadInfo={threadInfo}
           navigation={props.navigation}
           route={props.route}
           messageVerticalBounds={messageVerticalBounds}
           scrollable={false}
         />
       );
     },
     [messageVerticalBounds, props.navigation, props.route, threadInfo],
   );
 
   const footer = React.useMemo(() => {
     if (query === '') {
       return <SearchFooter text="Your search results will appear here" />;
     }
     if (!endReached) {
       return null;
     }
     if (measuredMessages.length > 0) {
       return <SearchFooter text="End of results" />;
     }
     const text =
       'No results. Please try using different keywords to refine your search';
     return <SearchFooter text={text} />;
   }, [query, endReached, measuredMessages.length]);
 
   const onEndOfLoadedMessagesReached = React.useCallback(() => {
     if (endReached) {
       return;
     }
     setLastID(oldestMessageID(measuredMessages));
   }, [endReached, measuredMessages, setLastID]);
 
   const styles = useStyles(unboundStyles);
 
   return (
     <MessageListContextProvider threadInfo={threadInfo}>
       <View
         style={styles.content}
         ref={scrollViewContainerRef}
         onLayout={onLayout}
       >
         <FlatList
           renderItem={renderItem}
           data={measuredMessages}
           onEndReached={onEndOfLoadedMessagesReached}
           ListFooterComponent={footer}
         />
       </View>
     </MessageListContextProvider>
   );
 }
 
 function oldestMessageID(data: $ReadOnlyArray<ChatMessageItemWithHeight>) {
   for (let i = data.length - 1; i >= 0; i--) {
     if (data[i].itemType === 'message' && data[i].messageInfo.id) {
       return data[i].messageInfo.id;
     }
   }
   return undefined;
 }
 
 const unboundStyles = {
   content: {
     height: '100%',
     backgroundColor: 'panelBackground',
   },
 };
 
 export default MessageSearch;
diff --git a/web/modals/search/message-search-utils.react.js b/web/modals/search/message-search-utils.react.js
index 12a082311..5498e3480 100644
--- a/web/modals/search/message-search-utils.react.js
+++ b/web/modals/search/message-search-utils.react.js
@@ -1,70 +1,51 @@
 // @flow
 
 import * as React from 'react';
 
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { messageListData } from 'lib/selectors/chat-selectors.js';
 import {
   createMessageInfo,
   modifyItemForResultScreen,
 } from 'lib/shared/message-utils.js';
+import { filterChatMessageInfosForSearch } from 'lib/shared/search-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import { useSelector } from '../../redux/redux-utils.js';
 
 function useParseSearchResults(
   threadInfo: ThreadInfo,
   searchResults: $ReadOnlyArray<RawMessageInfo>,
 ): $ReadOnlyArray<ChatMessageInfoItem> {
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const translatedSearchResults = React.useMemo(() => {
     const threadInfos = { [threadInfo.id]: threadInfo };
     return searchResults
       .map(rawMessageInfo =>
         createMessageInfo(rawMessageInfo, null, userInfos, threadInfos),
       )
       .filter(Boolean);
   }, [searchResults, threadInfo, userInfos]);
 
   const chatMessageInfos = useSelector(
     messageListData(threadInfo.id, translatedSearchResults),
   );
 
-  const filteredChatMessageInfos = React.useMemo(() => {
-    if (!chatMessageInfos) {
-      return [];
-    }
-
-    const idSet = new Set(translatedSearchResults.map(item => item.id));
-
-    const chatMessageInfoItems = chatMessageInfos.filter(
-      item => item.messageInfo && idSet.has(item.messageInfo.id),
-    );
-
-    const uniqueChatMessageInfoItemsMap = new Map();
-    chatMessageInfoItems.forEach(
-      item =>
-        item.messageInfo &&
-        item.messageInfo.id &&
-        uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
-    );
-
-    const sortedChatMessageInfoItems = [];
-    for (let i = 0; i < translatedSearchResults.length; i++) {
-      sortedChatMessageInfoItems.push(
-        uniqueChatMessageInfoItemsMap.get(translatedSearchResults[i].id),
-      );
-    }
-
-    return sortedChatMessageInfoItems.filter(Boolean);
-  }, [chatMessageInfos, translatedSearchResults]);
+  const filteredChatMessageInfos = React.useMemo(
+    () =>
+      filterChatMessageInfosForSearch(
+        chatMessageInfos,
+        translatedSearchResults,
+      ) ?? [],
+    [chatMessageInfos, translatedSearchResults],
+  );
 
   return React.useMemo(
     () => filteredChatMessageInfos.map(item => modifyItemForResultScreen(item)),
     [filteredChatMessageInfos],
   );
 }
 
 export { useParseSearchResults };