diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
index 5ded8e3e7..f39a788b8 100644
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -1,622 +1,640 @@
 // @flow
 
 import invariant from 'invariant';
 import _difference from 'lodash/fp/difference';
 import * as React from 'react';
 
 import {
   joinThreadActionTypes,
   joinThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
 import {
   userStoreSearchIndex,
   relativeMemberInfoSelectorForMembersOfThread,
 } from 'lib/selectors/user-selectors';
 import { localIDPrefix, trimMessage } from 'lib/shared/message-utils';
 import {
   threadHasPermission,
   viewerIsMember,
   threadFrozenDueToViewerBlock,
   threadActualMembers,
   checkIfDefaultMembersAreVoiced,
 } from 'lib/shared/thread-utils';
 import { getTypeaheadUserSuggestions } from 'lib/shared/typeahead-utils';
 import type { CalendarQuery } from 'lib/types/entry-types';
 import type { LoadingStatus } from 'lib/types/loading-types';
 import { messageTypes } from 'lib/types/message-types';
 import {
   type ThreadInfo,
   threadPermissions,
   type ClientThreadJoinRequest,
   type ThreadJoinPayload,
 } from 'lib/types/thread-types';
 import type { RelativeMemberInfo } from 'lib/types/thread-types';
 import { type UserInfos } from 'lib/types/user-types';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 import Button from '../components/button.react';
 import {
   type InputState,
   type PendingMultimediaUpload,
 } from '../input/input-state';
 import LoadingIndicator from '../loading-indicator.react';
 import { allowedMimeTypeString } from '../media/file-utils';
 import Multimedia from '../media/multimedia.react';
 import { useSelector } from '../redux/redux-utils';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors';
 import SWMansionIcon from '../SWMansionIcon.react';
 import { webTypeaheadRegex } from '../utils/typeahead-utils';
 import css from './chat-input-bar.css';
 import TypeaheadTooltip from './typeahead-tooltip.react';
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
   +inputState: InputState,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +viewerID: ?string,
   +joinThreadLoadingStatus: LoadingStatus,
   +threadCreationInProgress: boolean,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: number,
   +isThreadActive: boolean,
   +userInfos: UserInfos,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +joinThread: (request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>,
   +typeaheadMatchedStrings: ?TypeaheadMatchedStrings,
   +suggestedUsers: $ReadOnlyArray<RelativeMemberInfo>,
 };
 export type TypeaheadMatchedStrings = {
   +textBeforeAtSymbol: string,
   +usernamePrefix: string,
 };
 class ChatInputBar extends React.PureComponent<Props> {
   textarea: ?HTMLTextAreaElement;
   multimediaInput: ?HTMLInputElement;
 
   componentDidMount() {
     this.updateHeight();
     if (this.props.isThreadActive) {
       this.addReplyListener();
     }
   }
 
   componentWillUnmount() {
     if (this.props.isThreadActive) {
       this.removeReplyListener();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     if (this.props.isThreadActive && !prevProps.isThreadActive) {
       this.addReplyListener();
     } else if (!this.props.isThreadActive && prevProps.isThreadActive) {
       this.removeReplyListener();
     }
 
     const { inputState } = this.props;
     const prevInputState = prevProps.inputState;
     if (inputState.draft !== prevInputState.draft) {
       this.updateHeight();
     }
 
     if (
       inputState.draft !== prevInputState.draft ||
       inputState.textCursorPosition !== prevInputState.textCursorPosition
     ) {
       inputState.setTypeaheadState({
         canBeVisible: true,
       });
     }
 
     const curUploadIDs = ChatInputBar.unassignedUploadIDs(
       inputState.pendingUploads,
     );
     const prevUploadIDs = ChatInputBar.unassignedUploadIDs(
       prevInputState.pendingUploads,
     );
     if (
       this.multimediaInput &&
       _difference(prevUploadIDs)(curUploadIDs).length > 0
     ) {
       // Whenever a pending upload is removed, we reset the file
       // HTMLInputElement's value field, so that if the same upload occurs again
       // the onChange call doesn't get filtered
       this.multimediaInput.value = '';
     } else if (
       this.textarea &&
       _difference(curUploadIDs)(prevUploadIDs).length > 0
     ) {
       // Whenever a pending upload is added, we focus the textarea
       this.textarea.focus();
       return;
     }
 
     if (
       (this.props.threadInfo.id !== prevProps.threadInfo.id ||
         (inputState.textCursorPosition !== prevInputState.textCursorPosition &&
           this.textarea?.selectionStart === this.textarea?.selectionEnd)) &&
       this.textarea
     ) {
       this.textarea.focus();
 
       this.textarea?.setSelectionRange(
         inputState.textCursorPosition,
         inputState.textCursorPosition,
         'none',
       );
     }
   }
 
   static unassignedUploadIDs(
     pendingUploads: $ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     return pendingUploads
       .filter(
         (pendingUpload: PendingMultimediaUpload) => !pendingUpload.messageID,
       )
       .map((pendingUpload: PendingMultimediaUpload) => pendingUpload.localID);
   }
 
   updateHeight() {
     const textarea = this.textarea;
     if (textarea) {
       textarea.style.height = 'auto';
       const newHeight = Math.min(textarea.scrollHeight, 150);
       textarea.style.height = `${newHeight}px`;
     }
   }
 
   addReplyListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in addReplyListener',
     );
     this.props.inputState.addReplyListener(this.focusAndUpdateText);
   }
 
   removeReplyListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in removeReplyListener',
     );
     this.props.inputState.removeReplyListener(this.focusAndUpdateText);
   }
 
   render() {
     const isMember = viewerIsMember(this.props.threadInfo);
     const canJoin = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.JOIN_THREAD,
     );
 
     let joinButton = null;
     if (!isMember && canJoin && !this.props.threadCreationInProgress) {
       let buttonContent;
       if (this.props.joinThreadLoadingStatus === 'loading') {
         buttonContent = (
           <LoadingIndicator
             status={this.props.joinThreadLoadingStatus}
             size="medium"
             color="white"
           />
         );
       } else {
         buttonContent = (
           <>
             <SWMansionIcon icon="plus" size={24} />
             <p className={css.joinButtonText}>Join Chat</p>
           </>
         );
       }
       joinButton = (
         <div className={css.joinButtonContainer}>
           <Button
             variant="filled"
             buttonColor={{ backgroundColor: `#${this.props.threadInfo.color}` }}
             onClick={this.onClickJoin}
           >
             {buttonContent}
           </Button>
         </div>
       );
     }
 
     const { pendingUploads, cancelPendingUpload } = this.props.inputState;
     const multimediaPreviews = pendingUploads.map(pendingUpload => (
       <Multimedia
         uri={pendingUpload.uri}
         type={pendingUpload.mediaType}
         pendingUpload={pendingUpload}
         remove={cancelPendingUpload}
         multimediaCSSClass={css.multimedia}
         multimediaImageCSSClass={css.multimediaImage}
         key={pendingUpload.localID}
       />
     ));
     const previews =
       multimediaPreviews.length > 0 ? (
         <div className={css.previews}>{multimediaPreviews}</div>
       ) : null;
 
     let content;
     // If the thread is created by somebody else while the viewer is attempting
     // to create it, the threadInfo might be modified in-place and won't
     // list the viewer as a member, which will end up hiding the input. In
     // this case, we will assume that our creation action will get translated,
     // into a join and as long as members are voiced, we can show the input.
     const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
       this.props.threadInfo,
     );
 
     let sendButton;
     if (this.props.inputState.draft.length) {
       sendButton = (
         <a onClick={this.onSend} className={css.sendButton}>
           <SWMansionIcon
             icon="send-2"
             size={22}
             color={`#${this.props.threadInfo.color}`}
           />
         </a>
       );
     }
 
     if (
       threadHasPermission(this.props.threadInfo, threadPermissions.VOICED) ||
       (this.props.threadCreationInProgress && defaultMembersAreVoiced)
     ) {
       content = (
         <div className={css.inputBarWrapper}>
           <a className={css.multimediaUpload} onClick={this.onMultimediaClick}>
             <input
               type="file"
               onChange={this.onMultimediaFileChange}
               ref={this.multimediaInputRef}
               accept={allowedMimeTypeString}
               multiple
             />
             <SWMansionIcon
               icon="image-1"
               size={22}
               color={`#${this.props.threadInfo.color}`}
               disableFill
             />
           </a>
           <div className={css.inputBarTextInput}>
             <textarea
               rows="1"
               placeholder="Type your message"
               value={this.props.inputState.draft}
               onChange={this.onChangeMessageText}
               onKeyDown={this.onKeyDown}
               onClick={this.onClickTextarea}
               onSelect={this.onSelectTextarea}
               ref={this.textareaRef}
               autoFocus
             />
           </div>
           {sendButton}
         </div>
       );
     } else if (
       threadFrozenDueToViewerBlock(
         this.props.threadInfo,
         this.props.viewerID,
         this.props.userInfos,
       ) &&
       threadActualMembers(this.props.threadInfo.members).length === 2
     ) {
       content = (
         <span className={css.explanation}>
           You can&apos;t send messages to a user that you&apos;ve blocked.
         </span>
       );
     } else if (isMember) {
       content = (
         <span className={css.explanation}>
           You don&apos;t have permission to send messages.
         </span>
       );
     } else if (defaultMembersAreVoiced && canJoin) {
       content = null;
     } else {
       content = (
         <span className={css.explanation}>
           You don&apos;t have permission to send messages.
         </span>
       );
     }
 
     let typeaheadTooltip;
     if (
       this.props.inputState.typeaheadState.canBeVisible &&
       this.props.suggestedUsers.length > 0 &&
       this.props.typeaheadMatchedStrings &&
       this.textarea
     ) {
       typeaheadTooltip = (
         <TypeaheadTooltip
           inputState={this.props.inputState}
           textarea={this.textarea}
           matchedStrings={this.props.typeaheadMatchedStrings}
           suggestedUsers={this.props.suggestedUsers}
         />
       );
     }
 
     return (
       <div className={css.inputBar}>
         {joinButton}
         {previews}
         {content}
         {typeaheadTooltip}
       </div>
     );
   }
 
   textareaRef = (textarea: ?HTMLTextAreaElement) => {
     this.textarea = textarea;
     if (textarea) {
       textarea.focus();
     }
   };
 
   onChangeMessageText = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setDraft(event.currentTarget.value);
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   onClickTextarea = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   onSelectTextarea = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   focusAndUpdateText = (text: string) => {
     // We need to call focus() first on Safari, otherwise the cursor
     // ends up at the start instead of the end for some reason
     const { textarea } = this;
     invariant(textarea, 'textarea should be set');
     textarea.focus();
 
     // We reset the textarea to an empty string at the start so that the cursor
     // always ends up at the end, even if the text doesn't actually change
     textarea.value = '';
     const currentText = this.props.inputState.draft;
     if (!currentText.startsWith(text)) {
       const prependedText = text.concat(currentText);
       this.props.inputState.setDraft(prependedText);
       textarea.value = prependedText;
     } else {
       textarea.value = currentText;
     }
 
     // The above strategies make sure the cursor is at the end,
     // but we also need to make sure that we're scrolled to the bottom
     textarea.scrollTop = textarea.scrollHeight;
   };
 
   onKeyDown = (event: SyntheticKeyboardEvent<HTMLTextAreaElement>) => {
     const {
       accept,
       close,
       moveChoiceUp,
       moveChoiceDown,
     } = this.props.inputState.typeaheadState;
 
     const actions = {
       Enter: accept,
       Tab: accept,
       ArrowDown: moveChoiceDown,
       ArrowUp: moveChoiceUp,
       Escape: close,
     };
 
     if (
       this.props.inputState.typeaheadState.canBeVisible &&
       actions[event.key]
     ) {
       event.preventDefault();
       actions[event.key]();
     } else if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault();
       this.send();
     }
   };
 
   onSend = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.send();
   };
 
   send() {
     let { nextLocalID } = this.props;
 
     const text = trimMessage(this.props.inputState.draft);
     if (text) {
       this.dispatchTextMessageAction(text, nextLocalID);
       nextLocalID++;
     }
     if (this.props.inputState.pendingUploads.length > 0) {
       this.props.inputState.createMultimediaMessage(
         nextLocalID,
         this.props.threadInfo,
       );
     }
   }
 
   dispatchTextMessageAction(text: string, nextLocalID: number) {
     this.props.inputState.setDraft('');
 
     const localID = `${localIDPrefix}${nextLocalID}`;
     const creatorID = this.props.viewerID;
     invariant(creatorID, 'should have viewer ID in order to send a message');
 
     this.props.inputState.sendTextMessage(
       {
         type: messageTypes.TEXT,
         localID,
         threadID: this.props.threadInfo.id,
         text,
         creatorID,
         time: Date.now(),
       },
       this.props.threadInfo,
     );
   }
 
   multimediaInputRef = (multimediaInput: ?HTMLInputElement) => {
     this.multimediaInput = multimediaInput;
   };
 
   onMultimediaClick = () => {
     if (this.multimediaInput) {
       this.multimediaInput.click();
     }
   };
 
   onMultimediaFileChange = async (
     event: SyntheticInputEvent<HTMLInputElement>,
   ) => {
     const result = await this.props.inputState.appendFiles([
       ...event.target.files,
     ]);
     if (!result && this.multimediaInput) {
       this.multimediaInput.value = '';
     }
   };
 
   onClickJoin = () => {
     this.props.dispatchActionPromise(joinThreadActionTypes, this.joinAction());
   };
 
   async joinAction() {
     const query = this.props.calendarQuery();
     return await this.props.joinThread({
       threadID: this.props.threadInfo.id,
       calendarQuery: {
         startDate: query.startDate,
         endDate: query.endDate,
         filters: [
           ...query.filters,
           { type: 'threads', threadIDs: [this.props.threadInfo.id] },
         ],
       },
     });
   }
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 const createThreadLoadingStatusSelector = createLoadingStatusSelector(
   newThreadActionTypes,
 );
 
 const ConnectedChatInputBar: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedChatInputBar(props) {
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const nextLocalID = useSelector(state => state.nextLocalID);
     const isThreadActive = useSelector(
       state => props.threadInfo.id === state.navInfo.activeChatThreadID,
     );
     const userInfos = useSelector(state => state.userStore.userInfos);
     const joinThreadLoadingStatus = useSelector(
       joinThreadLoadingStatusSelector,
     );
     const createThreadLoadingStatus = useSelector(
       createThreadLoadingStatusSelector,
     );
     const threadCreationInProgress = createThreadLoadingStatus === 'loading';
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const dispatchActionPromise = useDispatchActionPromise();
     const callJoinThread = useServerCall(joinThread);
     const userSearchIndex = useSelector(userStoreSearchIndex);
     const threadMembers = useSelector(
       relativeMemberInfoSelectorForMembersOfThread(props.threadInfo.id),
     );
 
     const inputSliceEndingAtCursor = React.useMemo(
       () =>
         props.inputState.draft.slice(0, props.inputState.textCursorPosition),
       [props.inputState.draft, props.inputState.textCursorPosition],
     );
     // we only try to match if there is end of text or whitespace after cursor
     const typeaheadRegexMatches = React.useMemo(
       () =>
         inputSliceEndingAtCursor.length === props.inputState.draft.length ||
         /\s/.test(props.inputState.draft[props.inputState.textCursorPosition])
           ? inputSliceEndingAtCursor.match(webTypeaheadRegex)
           : null,
       [
         inputSliceEndingAtCursor,
         props.inputState.textCursorPosition,
         props.inputState.draft,
       ],
     );
 
     const typeaheadMatchedStrings: ?TypeaheadMatchedStrings = React.useMemo(
       () =>
         typeaheadRegexMatches !== null
           ? {
               textBeforeAtSymbol:
                 typeaheadRegexMatches.groups?.textPrefix ?? '',
               usernamePrefix: typeaheadRegexMatches.groups?.username ?? '',
             }
           : null,
       [typeaheadRegexMatches],
     );
 
+    React.useEffect(() => {
+      if (props.inputState.typeaheadState.keepUpdatingThreadMembers) {
+        const setter = props.inputState.setTypeaheadState;
+        setter({
+          frozenThreadMembers: threadMembers,
+        });
+      }
+    }, [
+      threadMembers,
+      props.inputState.setTypeaheadState,
+      props.inputState.typeaheadState.keepUpdatingThreadMembers,
+    ]);
+
     const suggestedUsers: $ReadOnlyArray<RelativeMemberInfo> = React.useMemo(() => {
       if (!typeaheadMatchedStrings) {
         return [];
       }
       return getTypeaheadUserSuggestions(
         userSearchIndex,
-        threadMembers,
+        props.inputState.typeaheadState.frozenThreadMembers,
         viewerID,
         typeaheadMatchedStrings.usernamePrefix,
       );
-    }, [userSearchIndex, threadMembers, viewerID, typeaheadMatchedStrings]);
+    }, [
+      userSearchIndex,
+      props.inputState.typeaheadState.frozenThreadMembers,
+      viewerID,
+      typeaheadMatchedStrings,
+    ]);
 
     return (
       <ChatInputBar
         {...props}
         viewerID={viewerID}
         joinThreadLoadingStatus={joinThreadLoadingStatus}
         threadCreationInProgress={threadCreationInProgress}
         calendarQuery={calendarQuery}
         nextLocalID={nextLocalID}
         isThreadActive={isThreadActive}
         userInfos={userInfos}
         dispatchActionPromise={dispatchActionPromise}
         joinThread={callJoinThread}
         typeaheadMatchedStrings={typeaheadMatchedStrings}
         suggestedUsers={suggestedUsers}
       />
     );
   },
 );
 
 export default ConnectedChatInputBar;
diff --git a/web/chat/typeahead-tooltip.react.js b/web/chat/typeahead-tooltip.react.js
index fbae28b5d..6a3501d7d 100644
--- a/web/chat/typeahead-tooltip.react.js
+++ b/web/chat/typeahead-tooltip.react.js
@@ -1,181 +1,190 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import type { RelativeMemberInfo } from 'lib/types/thread-types';
 import { leastPositiveResidue } from 'lib/utils/math-utils';
 
 import type { InputState } from '../input/input-state';
 import {
   getTypeaheadOverlayScroll,
   getTypeaheadTooltipActions,
   getTypeaheadTooltipButtons,
   getTypeaheadTooltipPosition,
 } from '../utils/typeahead-utils';
 import type { TypeaheadMatchedStrings } from './chat-input-bar.react';
 import css from './typeahead-tooltip.css';
 
 export type TypeaheadTooltipProps = {
   +inputState: InputState,
   +textarea: HTMLTextAreaElement,
   +matchedStrings: TypeaheadMatchedStrings,
   +suggestedUsers: $ReadOnlyArray<RelativeMemberInfo>,
 };
 
 function TypeaheadTooltip(props: TypeaheadTooltipProps): React.Node {
   const { inputState, textarea, matchedStrings, suggestedUsers } = props;
 
   const { textBeforeAtSymbol, usernamePrefix } = matchedStrings;
 
   const [isVisibleForAnimation, setIsVisibleForAnimation] = React.useState(
     false,
   );
 
   const [
     chosenPositionInOverlay,
     setChosenPositionInOverlay,
   ] = React.useState<number>(0);
 
   const overlayRef = React.useRef<?HTMLDivElement>();
 
   React.useEffect(() => {
     setChosenPositionInOverlay(0);
   }, [suggestedUsers]);
 
   React.useEffect(() => {
     setIsVisibleForAnimation(true);
+    const setter = inputState.setTypeaheadState;
+    setter({
+      keepUpdatingThreadMembers: false,
+    });
 
-    return () => setIsVisibleForAnimation(false);
-  }, []);
+    return () => {
+      setter({
+        keepUpdatingThreadMembers: true,
+      });
+      setIsVisibleForAnimation(false);
+    };
+  }, [inputState.setTypeaheadState]);
 
   const actions = React.useMemo(
     () =>
       getTypeaheadTooltipActions({
         inputStateDraft: inputState.draft,
         inputStateSetDraft: inputState.setDraft,
         inputStateSetTextCursorPosition: inputState.setTextCursorPosition,
         suggestedUsers,
         textBeforeAtSymbol,
         usernamePrefix,
       }),
     [
       inputState.draft,
       inputState.setDraft,
       inputState.setTextCursorPosition,
       suggestedUsers,
       textBeforeAtSymbol,
       usernamePrefix,
     ],
   );
 
   const tooltipPosition = React.useMemo(
     () =>
       getTypeaheadTooltipPosition(textarea, actions.length, textBeforeAtSymbol),
     [textarea, actions.length, textBeforeAtSymbol],
   );
 
   const tooltipPositionStyle = React.useMemo(
     () => ({
       top: tooltipPosition.top,
       left: tooltipPosition.left,
     }),
     [tooltipPosition],
   );
 
   const tooltipButtons = React.useMemo(
     () =>
       getTypeaheadTooltipButtons(
         setChosenPositionInOverlay,
         chosenPositionInOverlay,
         actions,
       ),
     [setChosenPositionInOverlay, actions, chosenPositionInOverlay],
   );
 
   const close = React.useCallback(() => {
     const setter = inputState.setTypeaheadState;
     setter({
       canBeVisible: false,
       moveChoiceUp: null,
       moveChoiceDown: null,
       close: null,
       accept: null,
     });
   }, [inputState.setTypeaheadState]);
 
   const accept = React.useCallback(() => {
     actions[chosenPositionInOverlay].execute();
     close();
   }, [actions, chosenPositionInOverlay, close]);
 
   const moveChoiceUp = React.useCallback(() => {
     if (actions.length === 0) {
       return;
     }
     setChosenPositionInOverlay(previousPosition =>
       leastPositiveResidue(previousPosition - 1, actions.length),
     );
   }, [setChosenPositionInOverlay, actions.length]);
 
   const moveChoiceDown = React.useCallback(() => {
     if (actions.length === 0) {
       return;
     }
     setChosenPositionInOverlay(previousPosition =>
       leastPositiveResidue(previousPosition + 1, actions.length),
     );
   }, [setChosenPositionInOverlay, actions.length]);
 
   React.useEffect(() => {
     const setter = inputState.setTypeaheadState;
     setter({
       canBeVisible: true,
       moveChoiceUp,
       moveChoiceDown,
       close,
       accept,
     });
 
     return close;
   }, [
     close,
     accept,
     moveChoiceUp,
     moveChoiceDown,
     actions,
     inputState.setTypeaheadState,
   ]);
 
   React.useEffect(() => {
     const current = overlayRef.current;
     if (current) {
       const newScrollTop = getTypeaheadOverlayScroll(
         current.scrollTop,
         chosenPositionInOverlay,
       );
       current.scrollTo(0, newScrollTop);
     }
   }, [chosenPositionInOverlay]);
 
   if (suggestedUsers.length === 0) {
     return null;
   }
 
   const overlayClasses = classNames(css.suggestionsContainer, {
     [css.notVisible]: !isVisibleForAnimation,
     [css.visible]: isVisibleForAnimation,
   });
 
   return (
     <div
       ref={overlayRef}
       className={overlayClasses}
       style={tooltipPositionStyle}
     >
       {tooltipButtons}
     </div>
   );
 }
 
 export default TypeaheadTooltip;
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index bd317f7b1..68799aff0 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1380 +1,1382 @@
 // @flow
 
 import { detect as detectBrowser } from 'detect-browser';
 import invariant from 'invariant';
 import _groupBy from 'lodash/fp/groupBy';
 import _keyBy from 'lodash/fp/keyBy';
 import _omit from 'lodash/fp/omit';
 import _partition from 'lodash/fp/partition';
 import _sortBy from 'lodash/fp/sortBy';
 import _memoize from 'lodash/memoize';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { createSelector } from 'reselect';
 
 import {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   legacySendMultimediaMessage,
   sendTextMessageActionTypes,
   sendTextMessage,
 } from 'lib/actions/message-actions';
 import { queueReportsActionType } from 'lib/actions/report-actions';
 import { newThread } from 'lib/actions/thread-actions';
 import {
   uploadMultimedia,
   updateMultimediaMessageMediaActionType,
   deleteUpload,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
 } from 'lib/actions/upload-actions';
 import {
   useModalContext,
   type PushModal,
 } from 'lib/components/modal-provider.react';
 import { getNextLocalUploadID } from 'lib/media/media-utils';
 import { pendingToRealizedThreadIDsSelector } from 'lib/selectors/thread-selectors';
 import {
   createMediaMessageInfo,
   localIDPrefix,
 } from 'lib/shared/message-utils';
 import {
   createRealThreadFromPendingThread,
   draftKeyFromThreadID,
   threadIsPending,
 } from 'lib/shared/thread-utils';
 import type { CalendarQuery } from 'lib/types/entry-types';
 import type {
   UploadMultimediaResult,
   MediaMissionStep,
   MediaMissionFailure,
   MediaMissionResult,
   MediaMission,
 } from 'lib/types/media-types';
 import {
   messageTypes,
   type RawMessageInfo,
   type RawMultimediaMessageInfo,
   type SendMessageResult,
   type SendMessagePayload,
 } from 'lib/types/message-types';
 import type { RawImagesMessageInfo } from 'lib/types/messages/images';
 import type { RawMediaMessageInfo } from 'lib/types/messages/media';
 import type { RawTextMessageInfo } from 'lib/types/messages/text';
 import type { Dispatch } from 'lib/types/redux-types';
 import { reportTypes } from 'lib/types/report-types';
 import type {
   ClientNewThreadRequest,
   NewThreadResult,
   ThreadInfo,
 } from 'lib/types/thread-types';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 import { getConfig } from 'lib/utils/config';
 import { getMessageForException, cloneError } from 'lib/utils/errors';
 
 import { validateFile, preloadImage } from '../media/media-utils';
 import InvalidUploadModal from '../modals/chat/invalid-upload.react';
 import { useSelector } from '../redux/redux-utils';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors';
 import {
   type PendingMultimediaUpload,
   type InputState,
   type TypeaheadState,
   InputStateContext,
 } from './input-state';
 
 const browser = detectBrowser();
 const exifRotate =
   !browser || (browser.name !== 'safari' && browser.name !== 'chrome');
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +drafts: { +[key: string]: string },
   +viewerID: ?string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +pendingRealizedThreadIDs: $ReadOnlyMap<string, string>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +calendarQuery: () => CalendarQuery,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +deleteUpload: (id: string) => Promise<void>,
   +sendMultimediaMessage: (
     threadID: string,
     localID: string,
     mediaIDs: $ReadOnlyArray<string>,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (
     threadID: string,
     localID: string,
     text: string,
   ) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
   +pushModal: PushModal,
   +sendCallbacks: $ReadOnlyArray<() => mixed>,
   +registerSendCallback: (() => mixed) => void,
   +unregisterSendCallback: (() => mixed) => void,
 };
 type State = {
   +pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
   +textCursorPositions: { [threadID: string]: number },
   +typeaheadState: TypeaheadState,
 };
 
 type PropsAndState = {
   ...Props,
   ...State,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
     textCursorPositions: {},
     typeaheadState: {
       canBeVisible: false,
+      keepUpdatingThreadMembers: true,
+      frozenThreadMembers: [],
       moveChoiceUp: null,
       moveChoiceDown: null,
       close: null,
       accept: null,
     },
   };
   replyCallbacks: Array<(message: string) => void> = [];
   pendingThreadCreations = new Map<string, Promise<string>>();
 
   static reassignToRealizedThreads<T>(
     state: { +[threadID: string]: T },
     props: Props,
   ): ?{ [threadID: string]: T } {
     const newState = {};
     let updated = false;
     for (const threadID in state) {
       const newThreadID =
         props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
       if (newThreadID !== threadID) {
         updated = true;
       }
       newState[newThreadID] = state[threadID];
     }
     return updated ? newState : null;
   }
 
   static getDerivedStateFromProps(props: Props, state: State) {
     const pendingUploads = InputStateContainer.reassignToRealizedThreads(
       state.pendingUploads,
       props,
     );
     const textCursorPositions = InputStateContainer.reassignToRealizedThreads(
       state.textCursorPositions,
       props,
     );
 
     if (!pendingUploads && !textCursorPositions) {
       return null;
     }
 
     const stateUpdate = {};
     if (pendingUploads) {
       stateUpdate.pendingUploads = pendingUploads;
     }
     if (textCursorPositions) {
       stateUpdate.textCursorPositions = textCursorPositions;
     }
     return stateUpdate;
   }
 
   static completedMessageIDs(state: State) {
     const completed = new Map();
     for (const threadID in state.pendingUploads) {
       const pendingUploads = state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID, serverID, failed } = upload;
         if (!messageID || !messageID.startsWith(localIDPrefix)) {
           continue;
         }
         if (!serverID || failed) {
           completed.set(messageID, false);
           continue;
         }
         if (completed.get(messageID) === undefined) {
           completed.set(messageID, true);
         }
       }
     }
     const messageIDs = new Set();
     for (const [messageID, isCompleted] of completed) {
       if (isCompleted) {
         messageIDs.add(messageID);
       }
     }
     return messageIDs;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const previouslyAssignedMessageIDs = new Set();
     for (const threadID in prevState.pendingUploads) {
       const pendingUploads = prevState.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const { messageID } = pendingUploads[localUploadID];
         if (messageID) {
           previouslyAssignedMessageIDs.add(messageID);
         }
       }
     }
 
     const newlyAssignedUploads = new Map();
     for (const threadID in this.state.pendingUploads) {
       const pendingUploads = this.state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID } = upload;
         if (
           !messageID ||
           !messageID.startsWith(localIDPrefix) ||
           previouslyAssignedMessageIDs.has(messageID)
         ) {
           continue;
         }
         let assignedUploads = newlyAssignedUploads.get(messageID);
         if (!assignedUploads) {
           assignedUploads = { threadID, uploads: [] };
           newlyAssignedUploads.set(messageID, assignedUploads);
         }
         assignedUploads.uploads.push(upload);
       }
     }
 
     const newMessageInfos = new Map();
     for (const [messageID, assignedUploads] of newlyAssignedUploads) {
       const { uploads, threadID } = assignedUploads;
       const creatorID = this.props.viewerID;
       invariant(creatorID, 'need viewer ID in order to send a message');
       const media = uploads.map(
         ({ localID, serverID, uri, mediaType, dimensions }) => {
           // We can get into this state where dimensions are null if the user is
           // uploading a file type that the browser can't render. In that case
           // we fake the dimensions here while we wait for the server to tell us
           // the true dimensions. We actually don't use the dimensions on the
           // web side currently, but if we ever change that (for instance if we
           // want to render a properly sized loading overlay like we do on
           // native), 0,0 is probably a good default.
           const shimmedDimensions = dimensions ?? { height: 0, width: 0 };
           invariant(
             mediaType === 'photo',
             "web InputStateContainer can't handle video",
           );
           return {
             id: serverID ? serverID : localID,
             uri,
             type: 'photo',
             dimensions: shimmedDimensions,
           };
         },
       );
       const messageInfo = createMediaMessageInfo({
         localID: messageID,
         threadID,
         creatorID,
         media,
       });
       newMessageInfos.set(messageID, messageInfo);
     }
 
     const currentlyCompleted = InputStateContainer.completedMessageIDs(
       this.state,
     );
     const previouslyCompleted = InputStateContainer.completedMessageIDs(
       prevState,
     );
     for (const messageID of currentlyCompleted) {
       if (previouslyCompleted.has(messageID)) {
         continue;
       }
       let rawMessageInfo = newMessageInfos.get(messageID);
       if (rawMessageInfo) {
         newMessageInfos.delete(messageID);
       } else {
         rawMessageInfo = this.getRawMultimediaMessageInfo(messageID);
       }
       this.sendMultimediaMessage(rawMessageInfo);
     }
 
     for (const [, messageInfo] of newMessageInfos) {
       this.props.dispatch({
         type: createLocalMessageActionType,
         payload: messageInfo,
       });
     }
   }
 
   getRawMultimediaMessageInfo(
     localMessageID: string,
   ): RawMultimediaMessageInfo {
     const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
     invariant(rawMessageInfo, `rawMessageInfo ${localMessageID} should exist`);
     invariant(
       rawMessageInfo.type === messageTypes.IMAGES ||
         rawMessageInfo.type === messageTypes.MULTIMEDIA,
       `rawMessageInfo ${localMessageID} should be multimedia`,
     );
     return rawMessageInfo;
   }
 
   async sendMultimediaMessage(messageInfo: RawMultimediaMessageInfo) {
     if (!threadIsPending(messageInfo.threadID)) {
       this.props.dispatchActionPromise(
         sendMultimediaMessageActionTypes,
         this.sendMultimediaMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       const threadCreationPromise = this.pendingThreadCreations.get(
         messageInfo.threadID,
       );
       if (!threadCreationPromise) {
         // When we create or retry multimedia message, we add a promise to
         // pendingThreadCreations map. This promise can be removed in
         // sendMultimediaMessage and sendTextMessage methods. When any of these
         // method remove the promise, it has to be settled. If the promise was
         // fulfilled, this method would be called with realized thread, so we
         // can conclude that the promise was rejected. We don't have enough info
         // here to retry the thread creation, but we can mark the message as
         // failed. Then the retry will be possible and promise will be created
         // again.
         throw new Error('Thread creation failed');
       }
       newThreadID = await threadCreationPromise;
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendMultimediaMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(messageInfo.threadID);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
       this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<SendMessagePayload> {
     const { localID, threadID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     const mediaIDs = [];
     for (const { id } of messageInfo.media) {
       mediaIDs.push(id);
     }
     try {
       const result = await this.props.sendMultimediaMessage(
         threadID,
         localID,
         mediaIDs,
       );
       this.setState(prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const newUploads = {};
         for (const localUploadID in prevUploads) {
           const upload = prevUploads[localUploadID];
           if (upload.messageID !== localID) {
             newUploads[localUploadID] = upload;
           } else if (!upload.uriIsReal) {
             newUploads[localUploadID] = {
               ...upload,
               messageID: result.id,
             };
           }
         }
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newUploads,
           },
         };
       });
       return {
         localID,
         serverID: result.id,
         threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = localID;
       copy.threadID = threadID;
       throw copy;
     }
   }
 
   async startThreadCreation(threadInfo: ThreadInfo): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return threadInfo.id;
     }
     let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
     if (!threadCreationPromise) {
       const calendarQuery = this.props.calendarQuery();
       threadCreationPromise = createRealThreadFromPendingThread({
         threadInfo,
         dispatchActionPromise: this.props.dispatchActionPromise,
         createNewThread: this.props.newThread,
         sourceMessageID: threadInfo.sourceMessageID,
         viewerID: this.props.viewerID,
         calendarQuery,
       });
       this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
     }
     return threadCreationPromise;
   }
 
   inputBaseStateSelector = _memoize((threadID: string) =>
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.pendingUploads[threadID],
       (propsAndState: PropsAndState) =>
         propsAndState.drafts[draftKeyFromThreadID(threadID)],
       (propsAndState: PropsAndState) =>
         propsAndState.textCursorPositions[threadID],
       (
         pendingUploads: ?{ [localUploadID: string]: PendingMultimediaUpload },
         draft: ?string,
         textCursorPosition: ?number,
       ) => {
         let threadPendingUploads = [];
         const assignedUploads = {};
         if (pendingUploads) {
           const [uploadsWithMessageIDs, uploadsWithoutMessageIDs] = _partition(
             'messageID',
           )(pendingUploads);
           threadPendingUploads = _sortBy('localID')(uploadsWithoutMessageIDs);
           const threadAssignedUploads = _groupBy('messageID')(
             uploadsWithMessageIDs,
           );
           for (const messageID in threadAssignedUploads) {
             // lodash libdefs don't return $ReadOnlyArray
             assignedUploads[messageID] = [...threadAssignedUploads[messageID]];
           }
         }
         return {
           pendingUploads: threadPendingUploads,
           assignedUploads,
           draft: draft ?? '',
           textCursorPosition: textCursorPosition ?? 0,
           appendFiles: (files: $ReadOnlyArray<File>) =>
             this.appendFiles(threadID, files),
           cancelPendingUpload: (localUploadID: string) =>
             this.cancelPendingUpload(threadID, localUploadID),
           sendTextMessage: (
             messageInfo: RawTextMessageInfo,
             threadInfo: ThreadInfo,
           ) => this.sendTextMessage(messageInfo, threadInfo),
           createMultimediaMessage: (localID: number, threadInfo: ThreadInfo) =>
             this.createMultimediaMessage(localID, threadInfo),
           setDraft: (newDraft: string) => this.setDraft(threadID, newDraft),
           setTextCursorPosition: (newPosition: number) =>
             this.setTextCursorPosition(threadID, newPosition),
           messageHasUploadFailure: (localMessageID: string) =>
             this.messageHasUploadFailure(assignedUploads[localMessageID]),
           retryMultimediaMessage: (
             localMessageID: string,
             threadInfo: ThreadInfo,
           ) =>
             this.retryMultimediaMessage(
               localMessageID,
               threadInfo,
               assignedUploads[localMessageID],
             ),
           addReply: (message: string) => this.addReply(message),
           addReplyListener: this.addReplyListener,
           removeReplyListener: this.removeReplyListener,
           registerSendCallback: this.props.registerSendCallback,
           unregisterSendCallback: this.props.unregisterSendCallback,
         };
       },
     ),
   );
 
   typeaheadStateSelector = createSelector(
     (propsAndState: PropsAndState) => propsAndState.typeaheadState,
     (typeaheadState: TypeaheadState) => ({
       typeaheadState,
       setTypeaheadState: this.setTypeaheadState,
     }),
   );
 
   inputStateSelector = createSelector(
     state => state.inputBaseState,
     state => state.typeaheadState,
     (inputBaseState, typeaheadState) => ({
       ...inputBaseState,
       ...typeaheadState,
     }),
   );
 
   getRealizedOrPendingThreadID(threadID: string): string {
     return this.props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
   }
 
   async appendFiles(
     threadID: string,
     files: $ReadOnlyArray<File>,
   ): Promise<boolean> {
     const selectionTime = Date.now();
     const { pushModal } = this.props;
 
     const appendResults = await Promise.all(
       files.map(file => this.appendFile(file, selectionTime)),
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
       pushModal(<InvalidUploadModal />);
 
       const time = Date.now() - selectionTime;
       const reports = [];
       for (const appendResult of appendResults) {
         const { steps } = appendResult;
         let { result } = appendResult;
         let uploadLocalID;
         if (result.success) {
           uploadLocalID = result.pendingUpload.localID;
           result = { success: false, reason: 'web_sibling_validation_failed' };
         }
         const mediaMission = { steps, result, userTime: time, totalTime: time };
         reports.push({ mediaMission, uploadLocalID });
       }
       this.queueMediaMissionReports(reports);
 
       return false;
     }
 
     const newUploads = appendResults.map(({ result }) => {
       invariant(result.success, 'any failed validation should be caught above');
       return result.pendingUpload;
     });
 
     const newUploadsObject = _keyBy('localID')(newUploads);
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const mergedUploads = prevUploads
           ? { ...prevUploads, ...newUploadsObject }
           : newUploadsObject;
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: mergedUploads,
           },
         };
       },
       () => this.uploadFiles(threadID, newUploads),
     );
     return true;
   }
 
   async appendFile(
     file: File,
     selectTime: number,
   ): Promise<{
     steps: $ReadOnlyArray<MediaMissionStep>,
     result:
       | MediaMissionFailure
       | { success: true, pendingUpload: PendingMultimediaUpload },
   }> {
     const steps = [
       {
         step: 'web_selection',
         filename: file.name,
         size: file.size,
         mime: file.type,
         selectTime,
       },
     ];
 
     let response;
     const validationStart = Date.now();
     try {
       response = await validateFile(file, exifRotate);
     } catch (e) {
       return {
         steps,
         result: {
           success: false,
           reason: 'processing_exception',
           time: Date.now() - validationStart,
           exceptionMessage: getMessageForException(e),
         },
       };
     }
     const { steps: validationSteps, result } = response;
     steps.push(...validationSteps);
     if (!result.success) {
       return { steps, result };
     }
 
     const { uri, file: fixedFile, mediaType, dimensions } = result;
     return {
       steps,
       result: {
         success: true,
         pendingUpload: {
           localID: getNextLocalUploadID(),
           serverID: null,
           messageID: null,
           failed: false,
           file: fixedFile,
           mediaType,
           dimensions,
           uri,
           loop: false,
           uriIsReal: false,
           progressPercent: 0,
           abort: null,
           steps,
           selectTime,
         },
       },
     };
   }
 
   uploadFiles(
     threadID: string,
     uploads: $ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     return Promise.all(
       uploads.map(upload => this.uploadFile(threadID, upload)),
     );
   }
 
   async uploadFile(threadID: string, upload: PendingMultimediaUpload) {
     const { selectTime, localID } = upload;
     const steps = [...upload.steps];
     let userTime;
 
     const sendReport = (missionResult: MediaMissionResult) => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const latestUpload = this.state.pendingUploads[newThreadID][localID];
       invariant(
         latestUpload,
         `pendingUpload ${localID} for ${newThreadID} missing in sendReport`,
       );
       const { serverID, messageID } = latestUpload;
       const totalTime = Date.now() - selectTime;
       userTime = userTime ? userTime : totalTime;
       const mission = { steps, result: missionResult, totalTime, userTime };
       this.queueMediaMissionReports([
         {
           mediaMission: mission,
           uploadLocalID: localID,
           uploadServerID: serverID,
           messageLocalID: messageID,
         },
       ]);
     };
 
     let uploadResult, uploadExceptionMessage;
     const uploadStart = Date.now();
     try {
       uploadResult = await this.props.uploadMultimedia(
         upload.file,
         { ...upload.dimensions, loop: false },
         {
           onProgress: (percent: number) =>
             this.setProgress(threadID, localID, percent),
           abortHandler: (abort: () => void) =>
             this.handleAbortCallback(threadID, localID, abort),
         },
       );
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       this.handleUploadFailure(threadID, localID);
     }
     userTime = Date.now() - selectTime;
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: upload.file.name,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
     });
     if (!uploadResult) {
       sendReport({
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       });
       return;
     }
     const result = uploadResult;
 
     const successThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterSuccess = this.state.pendingUploads[successThreadID][
       localID
     ];
     invariant(
       uploadAfterSuccess,
       `pendingUpload ${localID}/${result.id} for ${successThreadID} missing ` +
         `after upload`,
     );
     if (uploadAfterSuccess.messageID) {
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterSuccess.messageID,
           currentMediaID: localID,
           mediaUpdate: {
             id: result.id,
           },
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning serverID`,
       );
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               serverID: result.id,
               abort: null,
             },
           },
         },
       };
     });
 
     const { steps: preloadSteps } = await preloadImage(result.uri);
     steps.push(...preloadSteps);
     sendReport({ success: true });
 
     const preloadThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterPreload = this.state.pendingUploads[preloadThreadID][
       localID
     ];
     invariant(
       uploadAfterPreload,
       `pendingUpload ${localID}/${result.id} for ${preloadThreadID} missing ` +
         `after preload`,
     );
     if (uploadAfterPreload.messageID) {
       const { mediaType, uri, dimensions, loop } = result;
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterPreload.messageID,
           currentMediaID: uploadAfterPreload.serverID
             ? uploadAfterPreload.serverID
             : uploadAfterPreload.localID,
           mediaUpdate: { type: mediaType, uri, dimensions, loop },
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning URI`,
       );
       const { messageID } = currentUpload;
       if (messageID && !messageID.startsWith(localIDPrefix)) {
         const newPendingUploads = _omit([localID])(uploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               uri: result.uri,
               mediaType: result.mediaType,
               dimensions: result.dimensions,
               uriIsReal: true,
               loop: result.loop,
             },
           },
         },
       };
     });
   }
 
   handleAbortCallback(
     threadID: string,
     localUploadID: string,
     abort: () => void,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been cancelled before we were even handed the
         // abort function. We should immediately abort.
         abort();
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               abort,
             },
           },
         },
       };
     });
   }
 
   handleUploadFailure(threadID: string, localUploadID: string) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload || !upload.abort || upload.serverID) {
         // The upload has been cancelled or completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
               abort: null,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReports(
     partials: $ReadOnlyArray<{
       mediaMission: MediaMission,
       uploadLocalID?: ?string,
       uploadServerID?: ?string,
       messageLocalID?: ?string,
     }>,
   ) {
     const reports = partials.map(
       ({ mediaMission, uploadLocalID, uploadServerID, messageLocalID }) => ({
         type: reportTypes.MEDIA_MISSION,
         time: Date.now(),
         platformDetails: getConfig().platformDetails,
         mediaMission,
         uploadServerID,
         uploadLocalID,
         messageLocalID,
       }),
     );
     this.props.dispatch({ type: queueReportsActionType, payload: { reports } });
   }
 
   cancelPendingUpload(threadID: string, localUploadID: string) {
     let revokeURL, abortRequest;
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const currentPendingUploads = prevState.pendingUploads[newThreadID];
         if (!currentPendingUploads) {
           return {};
         }
         const pendingUpload = currentPendingUploads[localUploadID];
         if (!pendingUpload) {
           return {};
         }
         if (!pendingUpload.uriIsReal) {
           revokeURL = pendingUpload.uri;
         }
         if (pendingUpload.abort) {
           abortRequest = pendingUpload.abort;
         }
         if (pendingUpload.serverID) {
           this.props.deleteUpload(pendingUpload.serverID);
         }
         const newPendingUploads = _omit([localUploadID])(currentPendingUploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       },
       () => {
         if (revokeURL) {
           URL.revokeObjectURL(revokeURL);
         }
         if (abortRequest) {
           abortRequest();
         }
       },
     );
   }
 
   async sendTextMessage(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     if (!threadIsPending(threadInfo.id)) {
       this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       newThreadID = await this.startThreadCreation(threadInfo);
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendTextMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(threadInfo.id);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
   ): Promise<SendMessagePayload> {
     try {
       const { localID } = messageInfo;
       invariant(
         localID !== null && localID !== undefined,
         'localID should be set',
       );
       const result = await this.props.sendTextMessage(
         messageInfo.threadID,
         localID,
         messageInfo.text,
       );
       return {
         localID,
         serverID: result.id,
         threadID: messageInfo.threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       throw copy;
     }
   }
 
   // Creates a MultimediaMessage from the unassigned pending uploads,
   // if there are any
   createMultimediaMessage(localID: number, threadInfo: ThreadInfo) {
     const localMessageID = `${localIDPrefix}${localID}`;
     this.startThreadCreation(threadInfo);
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const currentPendingUploads = prevState.pendingUploads[newThreadID];
       if (!currentPendingUploads) {
         return {};
       }
       const newPendingUploads = {};
       let uploadAssigned = false;
       for (const localUploadID in currentPendingUploads) {
         const upload = currentPendingUploads[localUploadID];
         if (upload.messageID) {
           newPendingUploads[localUploadID] = upload;
         } else {
           const newUpload = {
             ...upload,
             messageID: localMessageID,
           };
           uploadAssigned = true;
           newPendingUploads[localUploadID] = newUpload;
         }
       }
       if (!uploadAssigned) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   setDraft(threadID: string, draft: string) {
     const newThreadID = this.getRealizedOrPendingThreadID(threadID);
     this.props.dispatch({
       type: 'UPDATE_DRAFT',
       payload: {
         key: draftKeyFromThreadID(newThreadID),
         text: draft,
       },
     });
   }
 
   setTextCursorPosition(threadID: string, newPosition: number) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       return {
         textCursorPositions: {
           ...prevState.textCursorPositions,
           [newThreadID]: newPosition,
         },
       };
     });
   }
 
   setTypeaheadState = (newState: $Shape<TypeaheadState>) => {
     this.setState(prevState => ({
       typeaheadState: {
         ...prevState.typeaheadState,
         ...newState,
       },
     }));
   };
 
   setProgress(
     threadID: string,
     localUploadID: string,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const pendingUploads = prevState.pendingUploads[newThreadID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   messageHasUploadFailure(
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     if (!pendingUploads) {
       return false;
     }
     return pendingUploads.some(upload => upload.failed);
   }
 
   retryMultimediaMessage(
     localMessageID: string,
     threadInfo: ThreadInfo,
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     const rawMessageInfo = this.getRawMultimediaMessageInfo(localMessageID);
     let newRawMessageInfo;
     // This conditional is for Flow
     if (rawMessageInfo.type === messageTypes.MULTIMEDIA) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: Date.now(),
       }: RawMediaMessageInfo);
     } else {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: Date.now(),
       }: RawImagesMessageInfo);
     }
 
     this.startThreadCreation(threadInfo);
 
     const completed = InputStateContainer.completedMessageIDs(this.state);
     if (completed.has(localMessageID)) {
       this.sendMultimediaMessage(newRawMessageInfo);
       return;
     }
 
     if (!pendingUploads) {
       return;
     }
 
     // We're not actually starting the send here,
     // we just use this action to update the message's timestamp in Redux
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: newRawMessageInfo,
     });
 
     const uploadIDsToRetry = new Set();
     const uploadsToRetry = [];
     for (const pendingUpload of pendingUploads) {
       const { serverID, messageID, localID, abort } = pendingUpload;
       if (serverID || messageID !== localMessageID) {
         continue;
       }
       if (abort) {
         abort();
       }
       uploadIDsToRetry.add(localID);
       uploadsToRetry.push(pendingUpload);
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const prevPendingUploads = prevState.pendingUploads[newThreadID];
       if (!prevPendingUploads) {
         return {};
       }
       const newPendingUploads = {};
       let pendingUploadChanged = false;
       for (const localID in prevPendingUploads) {
         const pendingUpload = prevPendingUploads[localID];
         if (uploadIDsToRetry.has(localID) && !pendingUpload.serverID) {
           newPendingUploads[localID] = {
             ...pendingUpload,
             failed: false,
             progressPercent: 0,
             abort: null,
           };
           pendingUploadChanged = true;
         } else {
           newPendingUploads[localID] = pendingUpload;
         }
       }
       if (!pendingUploadChanged) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
 
     this.uploadFiles(threadInfo.id, uploadsToRetry);
   }
 
   addReply = (message: string) => {
     this.replyCallbacks.forEach(addReplyCallback => addReplyCallback(message));
   };
 
   addReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks.push(callbackReply);
   };
 
   removeReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks = this.replyCallbacks.filter(
       candidate => candidate !== callbackReply,
     );
   };
 
   render() {
     const { activeChatThreadID } = this.props;
 
     // we're going with two selectors as we want to avoid
     // recreation of chat state setter functions on typeahead state updates
     let inputState: ?InputState = null;
     if (activeChatThreadID) {
       const inputBaseState = this.inputBaseStateSelector(activeChatThreadID)({
         ...this.state,
         ...this.props,
       });
 
       const typeaheadState = this.typeaheadStateSelector({
         ...this.state,
         ...this.props,
       });
 
       inputState = this.inputStateSelector({
         inputBaseState,
         typeaheadState,
       });
     }
 
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedInputStateContainer(props) {
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const drafts = useSelector(state => state.draftStore.drafts);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const pendingToRealizedThreadIDs = useSelector(state =>
       pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
     );
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callDeleteUpload = useServerCall(deleteUpload);
     const callSendMultimediaMessage = useServerCall(
       legacySendMultimediaMessage,
     );
     const callSendTextMessage = useServerCall(sendTextMessage);
     const callNewThread = useServerCall(newThread);
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const modalContext = useModalContext();
 
     const [sendCallbacks, setSendCallbacks] = React.useState<
       $ReadOnlyArray<() => mixed>,
     >([]);
     const registerSendCallback = React.useCallback((callback: () => mixed) => {
       setSendCallbacks(prevCallbacks => [...prevCallbacks, callback]);
     }, []);
     const unregisterSendCallback = React.useCallback(
       (callback: () => mixed) => {
         setSendCallbacks(prevCallbacks =>
           prevCallbacks.filter(candidate => candidate !== callback),
         );
       },
       [],
     );
 
     return (
       <InputStateContainer
         {...props}
         activeChatThreadID={activeChatThreadID}
         drafts={drafts}
         viewerID={viewerID}
         messageStoreMessages={messageStoreMessages}
         pendingRealizedThreadIDs={pendingToRealizedThreadIDs}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         deleteUpload={callDeleteUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         pushModal={modalContext.pushModal}
         sendCallbacks={sendCallbacks}
         registerSendCallback={registerSendCallback}
         unregisterSendCallback={unregisterSendCallback}
       />
     );
   },
 );
 
 export default ConnectedInputStateContainer;
diff --git a/web/input/input-state.js b/web/input/input-state.js
index 9fae25e29..31a18e336 100644
--- a/web/input/input-state.js
+++ b/web/input/input-state.js
@@ -1,80 +1,82 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   type MediaType,
   type Dimensions,
   type MediaMissionStep,
 } from 'lib/types/media-types';
 import type { RawTextMessageInfo } from 'lib/types/messages/text';
-import type { ThreadInfo } from 'lib/types/thread-types';
+import type { ThreadInfo, RelativeMemberInfo } from 'lib/types/thread-types';
 
 export type PendingMultimediaUpload = {
   localID: string,
   // Pending uploads are assigned a serverID once they are complete
   serverID: ?string,
   // Pending uploads are assigned a messageID once they are sent
   messageID: ?string,
   // This is set to true if the upload fails for whatever reason
   failed: boolean,
   file: File,
   mediaType: MediaType,
   dimensions: ?Dimensions,
   uri: string,
   loop: boolean,
   // URLs created with createObjectURL aren't considered "real". The distinction
   // is required because those "fake" URLs must be disposed properly
   uriIsReal: boolean,
   progressPercent: number,
   // This is set once the network request begins and used if the upload is
   // cancelled
   abort: ?() => void,
   steps: MediaMissionStep[],
   selectTime: number,
 };
 
 export type TypeaheadState = {
   +canBeVisible: boolean,
+  +keepUpdatingThreadMembers: boolean,
+  +frozenThreadMembers: $ReadOnlyArray<RelativeMemberInfo>,
   +moveChoiceUp: ?() => void,
   +moveChoiceDown: ?() => void,
   +close: ?() => void,
   +accept: ?() => void,
 };
 
 // This type represents the input state for a particular thread
 export type InputState = {
   +pendingUploads: $ReadOnlyArray<PendingMultimediaUpload>,
   +assignedUploads: {
     [messageID: string]: $ReadOnlyArray<PendingMultimediaUpload>,
   },
   +draft: string,
   +textCursorPosition: number,
   +typeaheadState: TypeaheadState,
   +appendFiles: (files: $ReadOnlyArray<File>) => Promise<boolean>,
   +cancelPendingUpload: (localUploadID: string) => void,
   +sendTextMessage: (
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
   ) => Promise<void>,
   +createMultimediaMessage: (localID: number, threadInfo: ThreadInfo) => void,
   +setDraft: (draft: string) => void,
   +setTextCursorPosition: (newPosition: number) => void,
   +setTypeaheadState: ($Shape<TypeaheadState>) => void,
   +messageHasUploadFailure: (localMessageID: string) => boolean,
   +retryMultimediaMessage: (
     localMessageID: string,
     threadInfo: ThreadInfo,
   ) => void,
   +addReply: (text: string) => void,
   +addReplyListener: ((message: string) => void) => void,
   +removeReplyListener: ((message: string) => void) => void,
   +registerSendCallback: (() => mixed) => void,
   +unregisterSendCallback: (() => mixed) => void,
 };
 
 const InputStateContext: React.Context<?InputState> = React.createContext<?InputState>(
   null,
 );
 
 export { InputStateContext };