diff --git a/lib/reducers/message-reducer.js b/lib/reducers/message-reducer.js
index a721f977d..123ef47f2 100644
--- a/lib/reducers/message-reducer.js
+++ b/lib/reducers/message-reducer.js
@@ -1,1053 +1,1053 @@
 // @flow
 
 import invariant from 'invariant';
 import _difference from 'lodash/fp/difference';
 import _flow from 'lodash/fp/flow';
 import _isEqual from 'lodash/fp/isEqual';
 import _keyBy from 'lodash/fp/keyBy';
 import _map from 'lodash/fp/map';
 import _mapKeys from 'lodash/fp/mapKeys';
 import _mapValues from 'lodash/fp/mapValues';
 import _omit from 'lodash/fp/omit';
 import _omitBy from 'lodash/fp/omitBy';
 import _orderBy from 'lodash/fp/orderBy';
 import _pick from 'lodash/fp/pick';
 import _pickBy from 'lodash/fp/pickBy';
 import _uniq from 'lodash/fp/uniq';
 
 import {
   createEntryActionTypes,
   saveEntryActionTypes,
   deleteEntryActionTypes,
   restoreEntryActionTypes,
 } from '../actions/entry-actions';
 import {
   fetchMessagesBeforeCursorActionTypes,
   fetchMostRecentMessagesActionTypes,
   sendTextMessageActionTypes,
   sendMultimediaMessageActionTypes,
   saveMessagesActionType,
   processMessagesActionType,
   messageStorePruneActionType,
   createLocalMessageActionType,
 } from '../actions/message-actions';
 import {
   changeThreadSettingsActionTypes,
   deleteThreadActionTypes,
   leaveThreadActionTypes,
   newThreadActionTypes,
   removeUsersFromThreadActionTypes,
   changeThreadMemberRolesActionTypes,
   joinThreadActionTypes,
 } from '../actions/thread-actions';
 import { updateMultimediaMessageMediaActionType } from '../actions/upload-actions';
 import {
   logOutActionTypes,
   deleteAccountActionTypes,
   logInActionTypes,
   resetPasswordActionTypes,
   registerActionTypes,
 } from '../actions/user-actions';
 import { pendingToRealizedThreadIDsSelector } from '../selectors/thread-selectors';
 import {
   messageID,
   combineTruncationStatuses,
   sortMessageInfoList,
 } from '../shared/message-utils';
 import {
   threadHasPermission,
   threadInChatList,
   threadIsPending,
 } from '../shared/thread-utils';
 import threadWatcher from '../shared/thread-watcher';
 import { unshimMessageInfos } from '../shared/unshim-utils';
 import {
   type RawMessageInfo,
   type LocalMessageInfo,
   type MessageStore,
   type MessageTruncationStatus,
   type MessagesResponse,
   type ThreadMessageInfo,
   type LocallyComposedMessageInfo,
   type RawMultimediaMessageInfo,
   messageTruncationStatus,
   messageTypes,
   defaultNumberPerThread,
 } from '../types/message-types';
 import type { RawImagesMessageInfo } from '../types/messages/images';
 import type { RawMediaMessageInfo } from '../types/messages/media';
 import type { RawTextMessageInfo } from '../types/messages/text';
 import { type BaseAction, rehydrateActionType } from '../types/redux-types';
 import {
   fullStateSyncActionType,
   incrementalStateSyncActionType,
 } from '../types/socket-types';
 import { type RawThreadInfo, threadPermissions } from '../types/thread-types';
 import {
   updateTypes,
   type UpdateInfo,
   processUpdatesActionType,
 } from '../types/update-types';
 import { setNewSessionActionType } from '../utils/action-utils';
 
 const _mapValuesWithKeys = _mapValues.convert({ cap: false });
 
 const sortMessageIDs = (messages: { [id: string]: RawMessageInfo }) =>
   _orderBy([(id: string) => messages[id].time, (id: string) => id])([
     'desc',
     'desc',
   ]);
 
 // Input must already be ordered!
 function threadsToMessageIDsFromMessageInfos(
   orderedMessageInfos: $ReadOnlyArray<RawMessageInfo>,
 ): { [threadID: string]: string[] } {
   const threads: { [threadID: string]: string[] } = {};
   for (const messageInfo of orderedMessageInfos) {
     const key = messageID(messageInfo);
     if (!threads[messageInfo.threadID]) {
       threads[messageInfo.threadID] = [key];
     } else {
       threads[messageInfo.threadID].push(key);
     }
   }
   return threads;
 }
 
 function threadIsWatched(
   threadID: string,
   threadInfo: ?RawThreadInfo,
   watchedIDs: $ReadOnlyArray<string>,
 ) {
   return (
     threadIsPending(threadID) ||
     (threadInfo &&
       threadHasPermission(threadInfo, threadPermissions.VISIBLE) &&
       (threadInChatList(threadInfo) || watchedIDs.includes(threadID)))
   );
 }
 
 function freshMessageStore(
   messageInfos: $ReadOnlyArray<RawMessageInfo>,
   truncationStatus: { [threadID: string]: MessageTruncationStatus },
   currentAsOf: number,
   threadInfos: { [threadID: string]: RawThreadInfo },
 ): MessageStore {
   const unshimmed = unshimMessageInfos(messageInfos);
   const orderedMessageInfos = sortMessageInfoList(unshimmed);
   const messages = _keyBy(messageID)(orderedMessageInfos);
   const threadsToMessageIDs = threadsToMessageIDsFromMessageInfos(
     orderedMessageInfos,
   );
   const lastPruned = Date.now();
   const threads = _mapValuesWithKeys(
     (messageIDs: string[], threadID: string) => ({
       messageIDs,
       startReached:
         truncationStatus[threadID] === messageTruncationStatus.EXHAUSTIVE,
       lastNavigatedTo: 0,
       lastPruned,
     }),
   )(threadsToMessageIDs);
   const watchedIDs = threadWatcher.getWatchedIDs();
   for (const threadID in threadInfos) {
     const threadInfo = threadInfos[threadID];
     if (
       threads[threadID] ||
       !threadIsWatched(threadID, threadInfo, watchedIDs)
     ) {
       continue;
     }
     threads[threadID] = {
       messageIDs: [],
       // We can conclude that startReached, since no messages were returned
       startReached: true,
       lastNavigatedTo: 0,
       lastPruned,
     };
   }
   return { messages, threads, local: {}, currentAsOf };
 }
 
 function reassignMessagesToRealizedThreads(
   messageStore: MessageStore,
   threadInfos: { +[threadID: string]: RawThreadInfo },
 ): MessageStore {
   const pendingToRealizedThreadIDs = pendingToRealizedThreadIDsSelector(
     threadInfos,
   );
 
   const messages = {};
   for (const storeMessageID in messageStore.messages) {
     const message = messageStore.messages[storeMessageID];
     const newThreadID = pendingToRealizedThreadIDs.get(message.threadID);
 
     messages[storeMessageID] = newThreadID
       ? {
           ...message,
           threadID: newThreadID,
         }
       : message;
   }
 
   const threads = {};
   for (const threadID in messageStore.threads) {
     const threadMessageInfo = messageStore.threads[threadID];
     const newThreadID = pendingToRealizedThreadIDs.get(threadID);
     if (!newThreadID) {
       threads[threadID] = threadMessageInfo;
       continue;
     }
     const realizedThread = messageStore.threads[newThreadID];
     if (!realizedThread) {
       threads[newThreadID] = threadMessageInfo;
       continue;
     }
     // This is the first time we see a thread, and yet it's already present
     // in message store. It means that something went wrong.
     invariant(false, 'Message store should not contain a new thread');
   }
 
   return {
     ...messageStore,
     threads,
     messages,
   };
 }
 
 // oldMessageStore is from the old state
 // newMessageInfos, truncationStatus come from server
 function mergeNewMessages(
   oldMessageStore: MessageStore,
   newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   truncationStatus: { [threadID: string]: MessageTruncationStatus },
   threadInfos: { [threadID: string]: RawThreadInfo },
   actionType: *,
 ): MessageStore {
   const messageStoreAfterReassignment = reassignMessagesToRealizedThreads(
     oldMessageStore,
     threadInfos,
   );
   const unshimmed = unshimMessageInfos(newMessageInfos);
   const localIDsToServerIDs: Map<string, string> = new Map();
   const orderedNewMessageInfos = _flow(
     _map((messageInfo: RawMessageInfo) => {
       const { id: inputID } = messageInfo;
       invariant(inputID, 'new messageInfos should have serverID');
       invariant(
         !threadIsPending(messageInfo.threadID),
         'new messageInfos should have realized thread id',
       );
       const currentMessageInfo =
         messageStoreAfterReassignment.messages[inputID];
       if (
         messageInfo.type === messageTypes.TEXT ||
         messageInfo.type === messageTypes.IMAGES ||
         messageInfo.type === messageTypes.MULTIMEDIA
       ) {
         const { localID: inputLocalID } = messageInfo;
         const currentLocalMessageInfo = inputLocalID
           ? messageStoreAfterReassignment.messages[inputLocalID]
           : null;
         if (currentMessageInfo && currentMessageInfo.localID) {
           // If the client already has a RawMessageInfo with this serverID, keep
           // any localID associated with the existing one. This is because we
           // use localIDs as React keys and changing React keys leads to loss of
           // component state. (The conditional below is for Flow)
           if (messageInfo.type === messageTypes.TEXT) {
             messageInfo = {
               ...messageInfo,
               localID: currentMessageInfo.localID,
             };
           } else if (messageInfo.type === messageTypes.MULTIMEDIA) {
             messageInfo = ({
               ...messageInfo,
               localID: currentMessageInfo.localID,
             }: RawMediaMessageInfo);
           } else {
             messageInfo = ({
               ...messageInfo,
               localID: currentMessageInfo.localID,
             }: RawImagesMessageInfo);
           }
         } else if (currentLocalMessageInfo && currentLocalMessageInfo.localID) {
           // If the client has a RawMessageInfo with this localID, but not with
           // the serverID, that means the message creation succeeded but the
           // success action never got processed. We set a key in
           // localIDsToServerIDs here to fix the messageIDs for the rest of the
           // MessageStore too. (The conditional below is for Flow)
           invariant(inputLocalID, 'should be set');
           localIDsToServerIDs.set(inputLocalID, inputID);
           if (messageInfo.type === messageTypes.TEXT) {
             messageInfo = {
               ...messageInfo,
               localID: currentLocalMessageInfo.localID,
             };
           } else if (messageInfo.type === messageTypes.MULTIMEDIA) {
             messageInfo = ({
               ...messageInfo,
               localID: currentLocalMessageInfo.localID,
             }: RawMediaMessageInfo);
           } else {
             messageInfo = ({
               ...messageInfo,
               localID: currentLocalMessageInfo.localID,
             }: RawImagesMessageInfo);
           }
         } else {
           // If neither the serverID nor the localID from the delivered
           // RawMessageInfo exists in the client store, then this message is
           // brand new to us. Ignore any localID provided by the server.
           // (The conditional below is for Flow)
           const { localID, ...rest } = messageInfo;
           if (rest.type === messageTypes.TEXT) {
             messageInfo = { ...rest };
           } else if (rest.type === messageTypes.MULTIMEDIA) {
             messageInfo = ({ ...rest }: RawMediaMessageInfo);
           } else {
             messageInfo = ({ ...rest }: RawImagesMessageInfo);
           }
         }
       } else if (
         currentMessageInfo &&
         messageInfo.time > currentMessageInfo.time
       ) {
         // When thick threads will be introduced it will be possible for two
         // clients to create the same message (e.g. when they create the same
         // sidebar at the same time). We're going to use deterministic ids for
         // messages which should be unique within a thread and we have to find
         // a way for clients to agree which message to keep. We can't rely on
         // always choosing incoming messages nor messages from the store,
         // because a message that is in one user's store, will be send to
         // another user. One way to deal with it is to always choose a message
         // which is older, according to its timestamp. We can use this strategy
         // only for messages that can start a thread, because for other types
         // it might break the "contiguous" property of message ids (we can
         // consider selecting younger messages in that case, but for now we use
         // an invariant).
         invariant(
           messageInfo.type === messageTypes.CREATE_SIDEBAR ||
             messageInfo.type === messageTypes.CREATE_THREAD ||
             messageInfo.type === messageTypes.SIDEBAR_SOURCE,
           `Two different messages of type ${messageInfo.type} with the same ` +
             'id found',
         );
         return currentMessageInfo;
       }
       return _isEqual(messageInfo)(currentMessageInfo)
         ? currentMessageInfo
         : messageInfo;
     }),
     sortMessageInfoList,
   )(unshimmed);
 
   const threadsToMessageIDs = threadsToMessageIDsFromMessageInfos(
     orderedNewMessageInfos,
   );
   const oldMessageInfosToCombine = [];
   const mustResortThreadMessageIDs = [];
   const lastPruned = Date.now();
   const watchedIDs = threadWatcher.getWatchedIDs();
   const local = {};
   const threads = _flow(
     _pickBy((messageIDs: string[], threadID: string) =>
       threadIsWatched(threadID, threadInfos[threadID], watchedIDs),
     ),
     _mapValuesWithKeys((messageIDs: string[], threadID: string) => {
       const oldThread = messageStoreAfterReassignment.threads[threadID];
       const truncate = truncationStatus[threadID];
       if (!oldThread) {
         if (actionType === fetchMessagesBeforeCursorActionTypes.success) {
           // Well, this is weird. Somehow fetchMessagesBeforeCursor got called
           // for a thread that doesn't exist in the messageStore. How did this
           // happen? How do we even know what cursor to use if we didn't have
           // any messages? Anyways, the messageStore is predicated on the
           // principle that it is current. We can't create a ThreadMessageInfo
           // for a thread if we can't guarantee this, as the client has no UX
           // for endReached, only for startReached. We'll have to bail out here.
           return null;
         }
         return {
           messageIDs,
           startReached: truncate === messageTruncationStatus.EXHAUSTIVE,
           lastNavigatedTo: 0,
           lastPruned,
         };
       }
       let oldMessageIDsUnchanged = true;
       const oldMessageIDs = oldThread.messageIDs.map((oldID) => {
         const newID = localIDsToServerIDs.get(oldID);
         if (newID !== null && newID !== undefined) {
           oldMessageIDsUnchanged = false;
           return newID;
         }
         return oldID;
       });
       if (truncate === messageTruncationStatus.TRUNCATED) {
         // If the result set in the payload isn't contiguous with what we have
         // now, that means we need to dump what we have in the state and replace
         // it with the result set. We do this to achieve our two goals for the
         // messageStore: currentness and contiguousness.
         return {
           messageIDs,
           startReached: false,
           lastNavigatedTo: oldThread.lastNavigatedTo,
           lastPruned: oldThread.lastPruned,
         };
       }
       const oldNotInNew = _difference(oldMessageIDs)(messageIDs);
       for (const id of oldNotInNew) {
         const oldMessageInfo = messageStoreAfterReassignment.messages[id];
         invariant(oldMessageInfo, `could not find ${id} in messageStore`);
         oldMessageInfosToCombine.push(oldMessageInfo);
         const localInfo = messageStoreAfterReassignment.local[id];
         if (localInfo) {
           local[id] = localInfo;
         }
       }
       const startReached =
         oldThread.startReached ||
         truncate === messageTruncationStatus.EXHAUSTIVE;
       if (_difference(messageIDs)(oldMessageIDs).length === 0) {
         if (startReached === oldThread.startReached && oldMessageIDsUnchanged) {
           return oldThread;
         }
         return {
           messageIDs: oldMessageIDs,
           startReached,
           lastNavigatedTo: oldThread.lastNavigatedTo,
           lastPruned: oldThread.lastPruned,
         };
       }
       const mergedMessageIDs = [...messageIDs, ...oldNotInNew];
       mustResortThreadMessageIDs.push(threadID);
       return {
         messageIDs: mergedMessageIDs,
         startReached,
         lastNavigatedTo: oldThread.lastNavigatedTo,
         lastPruned: oldThread.lastPruned,
       };
     }),
     _pickBy((thread) => !!thread),
   )(threadsToMessageIDs);
 
   for (const threadID in messageStoreAfterReassignment.threads) {
     if (
       threads[threadID] ||
       !threadIsWatched(threadID, threadInfos[threadID], watchedIDs)
     ) {
       continue;
     }
     let thread = messageStoreAfterReassignment.threads[threadID];
     const truncate = truncationStatus[threadID];
     if (truncate === messageTruncationStatus.EXHAUSTIVE) {
       thread = {
         ...thread,
         startReached: true,
       };
     }
     threads[threadID] = thread;
     for (const id of thread.messageIDs) {
       const messageInfo = messageStoreAfterReassignment.messages[id];
       if (messageInfo) {
         oldMessageInfosToCombine.push(messageInfo);
       }
       const localInfo = messageStoreAfterReassignment.local[id];
       if (localInfo) {
         local[id] = localInfo;
       }
     }
   }
 
   for (const threadID in threadInfos) {
     const threadInfo = threadInfos[threadID];
     if (
       threads[threadID] ||
       !threadIsWatched(threadID, threadInfo, watchedIDs)
     ) {
       continue;
     }
     threads[threadID] = {
       messageIDs: [],
       // We can conclude that startReached, since no messages were returned
       startReached: true,
       lastNavigatedTo: 0,
       lastPruned,
     };
   }
 
   const messages = _flow(
     sortMessageInfoList,
     _keyBy(messageID),
   )([...orderedNewMessageInfos, ...oldMessageInfosToCombine]);
 
   for (const threadID of mustResortThreadMessageIDs) {
     threads[threadID].messageIDs = sortMessageIDs(messages)(
       threads[threadID].messageIDs,
     );
   }
 
   const currentAsOf = Math.max(
     orderedNewMessageInfos.length > 0 ? orderedNewMessageInfos[0].time : 0,
     messageStoreAfterReassignment.currentAsOf,
   );
 
   return { messages, threads, local, currentAsOf };
 }
 
 function filterByNewThreadInfos(
   messageStore: MessageStore,
   threadInfos: { [id: string]: RawThreadInfo },
 ): MessageStore {
   const watchedIDs = threadWatcher.getWatchedIDs();
   const watchedThreadInfos = _pickBy((threadInfo: RawThreadInfo) =>
     threadIsWatched(threadInfo.id, threadInfo, watchedIDs),
   )(threadInfos);
   const messageIDsToRemove = [];
   for (const threadID in messageStore.threads) {
     if (watchedThreadInfos[threadID]) {
       continue;
     }
     for (const id of messageStore.threads[threadID].messageIDs) {
       messageIDsToRemove.push(id);
     }
   }
   return {
     messages: _omit(messageIDsToRemove)(messageStore.messages),
     threads: _pick(Object.keys(watchedThreadInfos))(messageStore.threads),
     local: _omit(messageIDsToRemove)(messageStore.local),
     currentAsOf: messageStore.currentAsOf,
   };
 }
 
 function ensureRealizedThreadIDIsUsedWhenPossible<
   T: RawTextMessageInfo | RawMultimediaMessageInfo | LocallyComposedMessageInfo,
 >(payload: T, threadInfos: { [id: string]: RawThreadInfo }): T {
   const pendingToRealizedThreadIDs = pendingToRealizedThreadIDsSelector(
     threadInfos,
   );
   const realizedThreadID = pendingToRealizedThreadIDs.get(payload.threadID);
   return realizedThreadID
     ? { ...payload, threadID: realizedThreadID }
     : payload;
 }
 
 function reduceMessageStore(
   messageStore: MessageStore,
   action: BaseAction,
   newThreadInfos: { [id: string]: RawThreadInfo },
 ): MessageStore {
   if (
     action.type === logInActionTypes.success ||
     action.type === resetPasswordActionTypes.success
   ) {
     const messagesResult = action.payload.messagesResult;
     return freshMessageStore(
       messagesResult.messageInfos,
       messagesResult.truncationStatus,
       messagesResult.currentAsOf,
       newThreadInfos,
     );
   } else if (action.type === incrementalStateSyncActionType) {
     if (
       action.payload.messagesResult.rawMessageInfos.length === 0 &&
       action.payload.updatesResult.newUpdates.length === 0
     ) {
       return messageStore;
     }
     const messagesResult = mergeUpdatesIntoMessagesResult(
       action.payload.messagesResult,
       action.payload.updatesResult.newUpdates,
     );
     return mergeNewMessages(
       messageStore,
       messagesResult.rawMessageInfos,
       messagesResult.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (action.type === processUpdatesActionType) {
     if (action.payload.updatesResult.newUpdates.length === 0) {
       return messageStore;
     }
 
     const mergedMessageInfos = [];
     const mergedTruncationStatuses = {};
     const { newUpdates } = action.payload.updatesResult;
     for (const updateInfo of newUpdates) {
       if (updateInfo.type !== updateTypes.JOIN_THREAD) {
         continue;
       }
       for (const messageInfo of updateInfo.rawMessageInfos) {
         mergedMessageInfos.push(messageInfo);
       }
       mergedTruncationStatuses[
         updateInfo.threadInfo.id
       ] = combineTruncationStatuses(
         updateInfo.truncationStatus,
         mergedTruncationStatuses[updateInfo.threadInfo.id],
       );
     }
     if (Object.keys(mergedTruncationStatuses).length === 0) {
       return messageStore;
     }
 
     const newMessageStore = mergeNewMessages(
       messageStore,
       mergedMessageInfos,
       mergedTruncationStatuses,
       newThreadInfos,
       action.type,
     );
     return {
       messages: newMessageStore.messages,
       threads: newMessageStore.threads,
       local: newMessageStore.local,
       currentAsOf: messageStore.currentAsOf,
     };
   } else if (
     action.type === fullStateSyncActionType ||
     action.type === processMessagesActionType
   ) {
     const { messagesResult } = action.payload;
     return mergeNewMessages(
       messageStore,
       messagesResult.rawMessageInfos,
       messagesResult.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === fetchMessagesBeforeCursorActionTypes.success ||
     action.type === fetchMostRecentMessagesActionTypes.success
   ) {
     return mergeNewMessages(
       messageStore,
       action.payload.rawMessageInfos,
       { [action.payload.threadID]: action.payload.truncationStatus },
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === logOutActionTypes.success ||
     action.type === deleteAccountActionTypes.success ||
     action.type === deleteThreadActionTypes.success ||
     action.type === leaveThreadActionTypes.success ||
     action.type === setNewSessionActionType
   ) {
     return filterByNewThreadInfos(messageStore, newThreadInfos);
   } else if (action.type === newThreadActionTypes.success) {
     const { newThreadID } = action.payload;
     const truncationStatuses = {};
     for (const messageInfo of action.payload.newMessageInfos) {
       truncationStatuses[messageInfo.threadID] =
         messageInfo.threadID === newThreadID
           ? messageTruncationStatus.EXHAUSTIVE
           : messageTruncationStatus.UNCHANGED;
     }
     return mergeNewMessages(
       messageStore,
       action.payload.newMessageInfos,
       truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (action.type === registerActionTypes.success) {
     const truncationStatuses = {};
     for (const messageInfo of action.payload.rawMessageInfos) {
       truncationStatuses[messageInfo.threadID] =
         messageTruncationStatus.EXHAUSTIVE;
     }
     return mergeNewMessages(
       messageStore,
       action.payload.rawMessageInfos,
       truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === changeThreadSettingsActionTypes.success ||
     action.type === removeUsersFromThreadActionTypes.success ||
     action.type === changeThreadMemberRolesActionTypes.success
   ) {
     return mergeNewMessages(
       messageStore,
       action.payload.newMessageInfos,
       { [action.payload.threadID]: messageTruncationStatus.UNCHANGED },
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === createEntryActionTypes.success ||
     action.type === saveEntryActionTypes.success
   ) {
     return mergeNewMessages(
       messageStore,
       action.payload.newMessageInfos,
       { [action.payload.threadID]: messageTruncationStatus.UNCHANGED },
       newThreadInfos,
       action.type,
     );
   } else if (action.type === deleteEntryActionTypes.success) {
     const payload = action.payload;
     if (payload) {
       return mergeNewMessages(
         messageStore,
         payload.newMessageInfos,
         { [payload.threadID]: messageTruncationStatus.UNCHANGED },
         newThreadInfos,
         action.type,
       );
     }
   } else if (action.type === restoreEntryActionTypes.success) {
     const { threadID } = action.payload;
     return mergeNewMessages(
       messageStore,
       action.payload.newMessageInfos,
       { [threadID]: messageTruncationStatus.UNCHANGED },
       newThreadInfos,
       action.type,
     );
   } else if (action.type === joinThreadActionTypes.success) {
     return mergeNewMessages(
       messageStore,
       action.payload.rawMessageInfos,
       action.payload.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === sendTextMessageActionTypes.started ||
     action.type === sendMultimediaMessageActionTypes.started
   ) {
     const payload = ensureRealizedThreadIDIsUsedWhenPossible(
       action.payload,
       newThreadInfos,
     );
     const { localID, threadID } = payload;
     invariant(localID, `localID should be set on ${action.type}`);
 
     if (messageStore.messages[localID]) {
       const messages = { ...messageStore.messages, [localID]: payload };
       const local = _pickBy(
         (localInfo: LocalMessageInfo, key: string) => key !== localID,
       )(messageStore.local);
       const threads = {
         ...messageStore.threads,
         [threadID]: {
           ...messageStore.threads[threadID],
           messageIDs: sortMessageIDs(messages)(
             messageStore.threads[threadID].messageIDs,
           ),
         },
       };
       return { ...messageStore, messages, threads, local };
     }
 
     const messageIDs = messageStore.threads[threadID]?.messageIDs ?? [];
     for (const existingMessageID of messageIDs) {
       const existingMessageInfo = messageStore.messages[existingMessageID];
       if (existingMessageInfo && existingMessageInfo.localID === localID) {
         return messageStore;
       }
     }
 
     const now = Date.now();
     const threadState: ThreadMessageInfo = messageStore.threads[threadID]
       ? {
           ...messageStore.threads[threadID],
           messageIDs: [localID, ...messageStore.threads[threadID].messageIDs],
         }
       : {
           messageIDs: [localID],
           startReached: true,
           lastNavigatedTo: now,
           lastPruned: now,
         };
     return {
       messages: {
         ...messageStore.messages,
         [localID]: payload,
       },
       threads: {
         ...messageStore.threads,
         [threadID]: threadState,
       },
       local: messageStore.local,
       currentAsOf: messageStore.currentAsOf,
     };
   } else if (
     action.type === sendTextMessageActionTypes.failed ||
     action.type === sendMultimediaMessageActionTypes.failed
   ) {
     const { localID } = action.payload;
     return {
       messages: messageStore.messages,
       threads: messageStore.threads,
       local: {
         ...messageStore.local,
         [localID]: { sendFailed: true },
       },
       currentAsOf: messageStore.currentAsOf,
     };
   } else if (
     action.type === sendTextMessageActionTypes.success ||
     action.type === sendMultimediaMessageActionTypes.success
   ) {
     const { payload } = action;
     invariant(
       !threadIsPending(payload.threadID),
       'Successful message action should have realized thread id',
     );
     const replaceMessageKey = (messageKey: string) =>
       messageKey === payload.localID ? payload.serverID : messageKey;
     let newMessages;
     if (messageStore.messages[payload.serverID]) {
       // If somehow the serverID got in there already, we'll just update the
       // serverID message and scrub the localID one
       newMessages = _omitBy(
         (messageInfo: RawMessageInfo) =>
           messageInfo.type === messageTypes.TEXT &&
           !messageInfo.id &&
           messageInfo.localID === payload.localID,
       )(messageStore.messages);
     } else if (messageStore.messages[payload.localID]) {
       // The normal case, the localID message gets replaced by the serverID one
       newMessages = _mapKeys(replaceMessageKey)(messageStore.messages);
     } else {
       // Well this is weird, we probably got deauthorized between when the
       // action was dispatched and when we ran this reducer...
       return messageStore;
     }
     newMessages[payload.serverID] = {
       ...newMessages[payload.serverID],
       id: payload.serverID,
       localID: payload.localID,
       time: payload.time,
     };
     const threadID = payload.threadID;
     const newMessageIDs = _flow(
       _uniq,
       sortMessageIDs(newMessages),
     )(messageStore.threads[threadID].messageIDs.map(replaceMessageKey));
     const currentAsOf =
       payload.interface === 'socket'
         ? Math.max(payload.time, messageStore.currentAsOf)
         : messageStore.currentAsOf;
     const local = _pickBy(
       (localInfo: LocalMessageInfo, key: string) => key !== payload.localID,
     )(messageStore.local);
     return {
       messages: newMessages,
       threads: {
         ...messageStore.threads,
         [threadID]: {
           ...messageStore.threads[threadID],
           messageIDs: newMessageIDs,
         },
       },
       local,
       currentAsOf,
     };
   } else if (action.type === saveMessagesActionType) {
     const truncationStatuses = {};
     for (const messageInfo of action.payload.rawMessageInfos) {
       truncationStatuses[messageInfo.threadID] =
         messageTruncationStatus.UNCHANGED;
     }
     const newMessageStore = mergeNewMessages(
       messageStore,
       action.payload.rawMessageInfos,
       truncationStatuses,
       newThreadInfos,
       action.type,
     );
     return {
       messages: newMessageStore.messages,
       threads: newMessageStore.threads,
       local: newMessageStore.local,
       // We avoid bumping currentAsOf because notifs may include a contracted
       // RawMessageInfo, so we want to make sure we still fetch it
       currentAsOf: messageStore.currentAsOf,
     };
   } else if (action.type === messageStorePruneActionType) {
     const now = Date.now();
     const messageIDsToPrune = [];
 
     const newThreads = { ...messageStore.threads };
     for (const threadID of action.payload.threadIDs) {
       let thread = newThreads[threadID];
       if (!thread) {
         continue;
       }
       thread = { ...thread, lastPruned: now };
 
       const newMessageIDs = [...thread.messageIDs];
       const removed = newMessageIDs.splice(defaultNumberPerThread);
       if (removed.length > 0) {
         thread = {
           ...thread,
           messageIDs: newMessageIDs,
           startReached: false,
         };
       }
       for (const id of removed) {
         messageIDsToPrune.push(id);
       }
 
       newThreads[threadID] = thread;
     }
 
     return {
       messages: _omit(messageIDsToPrune)(messageStore.messages),
       threads: newThreads,
       local: _omit(messageIDsToPrune)(messageStore.local),
       currentAsOf: messageStore.currentAsOf,
     };
   } else if (action.type === updateMultimediaMessageMediaActionType) {
     const { messageID: id, currentMediaID, mediaUpdate } = action.payload;
     const message = messageStore.messages[id];
     invariant(message, `message with ID ${id} could not be found`);
     invariant(
       message.type === messageTypes.IMAGES ||
         message.type === messageTypes.MULTIMEDIA,
       `message with ID ${id} is not multimedia`,
     );
 
     let replaced = false;
     const media = [];
     for (const singleMedia of message.media) {
       if (singleMedia.id !== currentMediaID) {
         media.push(singleMedia);
       } else if (singleMedia.type === 'photo') {
         replaced = true;
         media.push({
           ...singleMedia,
           ...mediaUpdate,
         });
       } else if (singleMedia.type === 'video') {
         replaced = true;
         media.push({
           ...singleMedia,
           ...mediaUpdate,
         });
       }
     }
     invariant(
       replaced,
       `message ${id} did not contain media with ID ${currentMediaID}`,
     );
 
     return {
       ...messageStore,
       messages: {
         ...messageStore.messages,
         [id]: {
           ...message,
           media,
         },
       },
     };
   } else if (action.type === createLocalMessageActionType) {
     const messageInfo = ensureRealizedThreadIDIsUsedWhenPossible(
       action.payload,
       newThreadInfos,
     );
     return {
       ...messageStore,
       messages: {
         ...messageStore.messages,
         [messageInfo.localID]: messageInfo,
       },
       threads: {
         ...messageStore.threads,
         [messageInfo.threadID]: {
           ...messageStore.threads[messageInfo.threadID],
           messageIDs: [
             messageInfo.localID,
-            ...messageStore.threads[messageInfo.threadID].messageIDs,
+            ...(messageStore.threads[messageInfo.threadID]?.messageIDs ?? []),
           ],
         },
       },
     };
   } else if (action.type === rehydrateActionType) {
     // When starting the app on native, we filter out any local-only multimedia
     // messages because the relevant context is no longer available
     const { messages, threads, local } = messageStore;
 
     const newMessages = {};
     let newThreads = threads,
       newLocal = local;
     for (const id in messages) {
       const message = messages[id];
       if (
         (message.type !== messageTypes.IMAGES &&
           message.type !== messageTypes.MULTIMEDIA) ||
         message.id
       ) {
         newMessages[id] = message;
         continue;
       }
       const { threadID } = message;
       newThreads = {
         ...newThreads,
         [threadID]: {
           ...newThreads[threadID],
           messageIDs: newThreads[threadID].messageIDs.filter(
             (curMessageID) => curMessageID !== id,
           ),
         },
       };
       newLocal = _pickBy(
         (localInfo: LocalMessageInfo, key: string) => key !== id,
       )(newLocal);
     }
 
     if (newThreads === threads) {
       return messageStore;
     }
     return {
       ...messageStore,
       messages: newMessages,
       threads: newThreads,
       local: newLocal,
     };
   }
   return messageStore;
 }
 
 function mergeUpdatesIntoMessagesResult(
   messagesResult: MessagesResponse,
   newUpdates: $ReadOnlyArray<UpdateInfo>,
 ): MessagesResponse {
   const messageIDs = new Set(
     messagesResult.rawMessageInfos.map((messageInfo) => messageInfo.id),
   );
   const mergedMessageInfos = [...messagesResult.rawMessageInfos];
   const mergedTruncationStatuses = { ...messagesResult.truncationStatuses };
   for (const updateInfo of newUpdates) {
     if (updateInfo.type !== updateTypes.JOIN_THREAD) {
       continue;
     }
     for (const messageInfo of updateInfo.rawMessageInfos) {
       if (messageIDs.has(messageInfo.id)) {
         continue;
       }
       mergedMessageInfos.push(messageInfo);
       messageIDs.add(messageInfo.id);
     }
     mergedTruncationStatuses[
       updateInfo.threadInfo.id
     ] = combineTruncationStatuses(
       updateInfo.truncationStatus,
       mergedTruncationStatuses[updateInfo.threadInfo.id],
     );
   }
   return {
     rawMessageInfos: mergedMessageInfos,
     truncationStatuses: mergedTruncationStatuses,
     currentAsOf: messagesResult.currentAsOf,
   };
 }
 
 export { freshMessageStore, reduceMessageStore };
diff --git a/lib/types/redux-types.js b/lib/types/redux-types.js
index 77cd19bb9..8721fc5ce 100644
--- a/lib/types/redux-types.js
+++ b/lib/types/redux-types.js
@@ -1,829 +1,829 @@
 // @flow
 
 import type {
   LogOutResult,
   LogInStartingPayload,
   LogInResult,
   RegisterResult,
 } from './account-types';
 import type {
   ActivityUpdateSuccessPayload,
   QueueActivityUpdatesPayload,
   SetThreadUnreadStatusPayload,
 } from './activity-types';
 import type {
   RawEntryInfo,
   EntryStore,
   CalendarQuery,
   SaveEntryPayload,
   CreateEntryPayload,
   DeleteEntryResponse,
   RestoreEntryPayload,
   FetchEntryInfosResult,
   CalendarQueryUpdateResult,
   CalendarQueryUpdateStartingPayload,
 } from './entry-types';
 import type {
   CalendarFilter,
   CalendarThreadFilter,
   SetCalendarDeletedFilterPayload,
 } from './filter-types';
 import type { LifecycleState } from './lifecycle-state-types';
 import type { LoadingStatus, LoadingInfo } from './loading-types';
 import type { UpdateMultimediaMessageMediaPayload } from './media-types';
 import type {
   MessageStore,
   RawMultimediaMessageInfo,
   FetchMessageInfosPayload,
   SendMessagePayload,
   SaveMessagesPayload,
   NewMessagesPayload,
   MessageStorePrunePayload,
   LocallyComposedMessageInfo,
 } from './message-types';
 import type { RawTextMessageInfo } from './messages/text';
 import type { BaseNavInfo } from './nav-types';
 import type { RelationshipErrors } from './relationship-types';
 import type {
   ClearDeliveredReportsPayload,
   ClientReportCreationRequest,
   QueueReportsPayload,
 } from './report-types';
 import type { ProcessServerRequestsPayload } from './request-types';
 import type { UserSearchResult } from './search-types';
 import type { SetSessionPayload } from './session-types';
 import type {
   ConnectionInfo,
   StateSyncFullActionPayload,
   StateSyncIncrementalActionPayload,
   UpdateConnectionStatusPayload,
   SetLateResponsePayload,
   UpdateDisconnectedBarPayload,
 } from './socket-types';
 import type { SubscriptionUpdateResult } from './subscription-types';
 import type {
   ThreadStore,
   ChangeThreadSettingsPayload,
   LeaveThreadPayload,
   NewThreadResult,
   ThreadJoinPayload,
 } from './thread-types';
 import type { UpdatesResultWithUserInfos } from './update-types';
 import type { CurrentUserInfo, UserStore } from './user-types';
 
 export type BaseAppState<NavInfo: BaseNavInfo> = {
   navInfo: NavInfo,
   currentUserInfo: ?CurrentUserInfo,
   entryStore: EntryStore,
   threadStore: ThreadStore,
   userStore: UserStore,
   messageStore: MessageStore,
   updatesCurrentAsOf: number, // millisecond timestamp
   loadingStatuses: { [key: string]: { [idx: number]: LoadingStatus } },
   calendarFilters: $ReadOnlyArray<CalendarFilter>,
   urlPrefix: string,
   connection: ConnectionInfo,
   watchedThreadIDs: $ReadOnlyArray<string>,
   lifecycleState: LifecycleState,
   nextLocalID: number,
   queuedReports: $ReadOnlyArray<ClientReportCreationRequest>,
   dataLoaded: boolean,
 };
 
 // Web JS runtime doesn't have access to the cookie for security reasons.
 // Native JS doesn't have a sessionID because the cookieID is used instead.
 // Web JS doesn't have a device token because it's not a device...
 export type NativeAppState = BaseAppState<*> & {
   sessionID?: void,
   deviceToken: ?string,
   cookie: ?string,
 };
 export type WebAppState = BaseAppState<*> & {
   sessionID: ?string,
   deviceToken?: void,
   cookie?: void,
 };
 export type AppState = NativeAppState | WebAppState;
 
 export type BaseAction =
   | {|
       +type: '@@redux/INIT',
       +payload?: void,
     |}
   | {|
       +type: 'FETCH_ENTRIES_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FETCH_ENTRIES_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FETCH_ENTRIES_SUCCESS',
       +payload: FetchEntryInfosResult,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'LOG_OUT_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'LOG_OUT_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'LOG_OUT_SUCCESS',
       +payload: LogOutResult,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'DELETE_ACCOUNT_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'DELETE_ACCOUNT_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'DELETE_ACCOUNT_SUCCESS',
       +payload: LogOutResult,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CREATE_LOCAL_ENTRY',
       +payload: RawEntryInfo,
     |}
   | {|
       +type: 'CREATE_ENTRY_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CREATE_ENTRY_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CREATE_ENTRY_SUCCESS',
       +payload: CreateEntryPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SAVE_ENTRY_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SAVE_ENTRY_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SAVE_ENTRY_SUCCESS',
       +payload: SaveEntryPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CONCURRENT_MODIFICATION_RESET',
       +payload: {|
         +id: string,
         +dbText: string,
       |},
     |}
   | {|
       +type: 'DELETE_ENTRY_STARTED',
       +loadingInfo: LoadingInfo,
       +payload: {|
         +localID: ?string,
         +serverID: ?string,
       |},
     |}
   | {|
       +type: 'DELETE_ENTRY_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'DELETE_ENTRY_SUCCESS',
       +payload: ?DeleteEntryResponse,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'LOG_IN_STARTED',
       +loadingInfo: LoadingInfo,
       +payload: LogInStartingPayload,
     |}
   | {|
       +type: 'LOG_IN_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'LOG_IN_SUCCESS',
       +payload: LogInResult,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'REGISTER_STARTED',
       +loadingInfo: LoadingInfo,
       +payload: LogInStartingPayload,
     |}
   | {|
       +type: 'REGISTER_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'REGISTER_SUCCESS',
       +payload: RegisterResult,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'RESET_PASSWORD_STARTED',
       +payload: {| calendarQuery: CalendarQuery |},
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'RESET_PASSWORD_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'RESET_PASSWORD_SUCCESS',
       +payload: LogInResult,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FORGOT_PASSWORD_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FORGOT_PASSWORD_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FORGOT_PASSWORD_SUCCESS',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CHANGE_USER_SETTINGS_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CHANGE_USER_SETTINGS_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CHANGE_USER_SETTINGS_SUCCESS',
       +payload: {|
         +email: string,
       |},
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'RESEND_VERIFICATION_EMAIL_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'RESEND_VERIFICATION_EMAIL_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'RESEND_VERIFICATION_EMAIL_SUCCESS',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CHANGE_THREAD_SETTINGS_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CHANGE_THREAD_SETTINGS_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CHANGE_THREAD_SETTINGS_SUCCESS',
       +payload: ChangeThreadSettingsPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'DELETE_THREAD_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'DELETE_THREAD_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'DELETE_THREAD_SUCCESS',
       +payload: LeaveThreadPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'NEW_THREAD_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'NEW_THREAD_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'NEW_THREAD_SUCCESS',
       +payload: NewThreadResult,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'REMOVE_USERS_FROM_THREAD_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'REMOVE_USERS_FROM_THREAD_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'REMOVE_USERS_FROM_THREAD_SUCCESS',
       +payload: ChangeThreadSettingsPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CHANGE_THREAD_MEMBER_ROLES_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CHANGE_THREAD_MEMBER_ROLES_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'CHANGE_THREAD_MEMBER_ROLES_SUCCESS',
       +payload: ChangeThreadSettingsPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FETCH_REVISIONS_FOR_ENTRY_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FETCH_REVISIONS_FOR_ENTRY_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FETCH_REVISIONS_FOR_ENTRY_SUCCESS',
       +payload: {|
         +entryID: string,
         +text: string,
         +deleted: boolean,
       |},
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'RESTORE_ENTRY_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'RESTORE_ENTRY_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'RESTORE_ENTRY_SUCCESS',
       +payload: RestoreEntryPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'JOIN_THREAD_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'JOIN_THREAD_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'JOIN_THREAD_SUCCESS',
       +payload: ThreadJoinPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'LEAVE_THREAD_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'LEAVE_THREAD_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'LEAVE_THREAD_SUCCESS',
       +payload: LeaveThreadPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SET_NEW_SESSION',
       +payload: SetSessionPayload,
     |}
   | {|
       +type: 'persist/REHYDRATE',
       +payload: ?BaseAppState<*>,
     |}
   | {|
       +type: 'FETCH_MESSAGES_BEFORE_CURSOR_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FETCH_MESSAGES_BEFORE_CURSOR_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FETCH_MESSAGES_BEFORE_CURSOR_SUCCESS',
       +payload: FetchMessageInfosPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FETCH_MOST_RECENT_MESSAGES_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FETCH_MOST_RECENT_MESSAGES_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FETCH_MOST_RECENT_MESSAGES_SUCCESS',
       +payload: FetchMessageInfosPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SEND_TEXT_MESSAGE_STARTED',
       +loadingInfo?: LoadingInfo,
       +payload: RawTextMessageInfo,
     |}
   | {|
       +type: 'SEND_TEXT_MESSAGE_FAILED',
       +error: true,
       +payload: Error & {
         +localID: string,
         +threadID: string,
       },
       +loadingInfo?: LoadingInfo,
     |}
   | {|
       +type: 'SEND_TEXT_MESSAGE_SUCCESS',
       +payload: SendMessagePayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SEND_MULTIMEDIA_MESSAGE_STARTED',
-      +loadingInfo: LoadingInfo,
+      +loadingInfo?: LoadingInfo,
       +payload: RawMultimediaMessageInfo,
     |}
   | {|
       +type: 'SEND_MULTIMEDIA_MESSAGE_FAILED',
       +error: true,
       +payload: Error & {
         +localID: string,
         +threadID: string,
       },
-      +loadingInfo: LoadingInfo,
+      +loadingInfo?: LoadingInfo,
     |}
   | {|
       +type: 'SEND_MULTIMEDIA_MESSAGE_SUCCESS',
       +payload: SendMessagePayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SEARCH_USERS_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SEARCH_USERS_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SEARCH_USERS_SUCCESS',
       +payload: UserSearchResult,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SAVE_DRAFT',
       +payload: {
         +key: string,
         +draft: string,
       },
     |}
   | {|
       +type: 'UPDATE_ACTIVITY_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'UPDATE_ACTIVITY_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'UPDATE_ACTIVITY_SUCCESS',
       +payload: ActivityUpdateSuccessPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SET_DEVICE_TOKEN_STARTED',
       +payload: string,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SET_DEVICE_TOKEN_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SET_DEVICE_TOKEN_SUCCESS',
       +payload: string,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'HANDLE_VERIFICATION_CODE_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'HANDLE_VERIFICATION_CODE_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'HANDLE_VERIFICATION_CODE_SUCCESS',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SEND_REPORT_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SEND_REPORT_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SEND_REPORT_SUCCESS',
       +payload?: ClearDeliveredReportsPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SEND_REPORTS_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SEND_REPORTS_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SEND_REPORTS_SUCCESS',
       +payload?: ClearDeliveredReportsPayload,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'QUEUE_REPORTS',
       +payload: QueueReportsPayload,
     |}
   | {|
       +type: 'SET_URL_PREFIX',
       +payload: string,
     |}
   | {|
       +type: 'SAVE_MESSAGES',
       +payload: SaveMessagesPayload,
     |}
   | {|
       +type: 'UPDATE_CALENDAR_THREAD_FILTER',
       +payload: CalendarThreadFilter,
     |}
   | {|
       +type: 'CLEAR_CALENDAR_THREAD_FILTER',
       +payload?: void,
     |}
   | {|
       +type: 'SET_CALENDAR_DELETED_FILTER',
       +payload: SetCalendarDeletedFilterPayload,
     |}
   | {|
       +type: 'UPDATE_SUBSCRIPTION_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'UPDATE_SUBSCRIPTION_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'UPDATE_SUBSCRIPTION_SUCCESS',
       +payload: SubscriptionUpdateResult,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'UPDATE_CALENDAR_QUERY_STARTED',
       +loadingInfo: LoadingInfo,
       +payload?: CalendarQueryUpdateStartingPayload,
     |}
   | {|
       +type: 'UPDATE_CALENDAR_QUERY_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'UPDATE_CALENDAR_QUERY_SUCCESS',
       +payload: CalendarQueryUpdateResult,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'FULL_STATE_SYNC',
       +payload: StateSyncFullActionPayload,
     |}
   | {|
       +type: 'INCREMENTAL_STATE_SYNC',
       +payload: StateSyncIncrementalActionPayload,
     |}
   | {|
       +type: 'PROCESS_SERVER_REQUESTS',
       +payload: ProcessServerRequestsPayload,
     |}
   | {|
       +type: 'UPDATE_CONNECTION_STATUS',
       +payload: UpdateConnectionStatusPayload,
     |}
   | {|
       +type: 'QUEUE_ACTIVITY_UPDATES',
       +payload: QueueActivityUpdatesPayload,
     |}
   | {|
       +type: 'UNSUPERVISED_BACKGROUND',
       +payload?: void,
     |}
   | {|
       +type: 'UPDATE_LIFECYCLE_STATE',
       +payload: LifecycleState,
     |}
   | {|
       +type: 'PROCESS_UPDATES',
       +payload: UpdatesResultWithUserInfos,
     |}
   | {|
       +type: 'PROCESS_MESSAGES',
       +payload: NewMessagesPayload,
     |}
   | {|
       +type: 'MESSAGE_STORE_PRUNE',
       +payload: MessageStorePrunePayload,
     |}
   | {|
       +type: 'SET_LATE_RESPONSE',
       +payload: SetLateResponsePayload,
     |}
   | {|
       +type: 'UPDATE_DISCONNECTED_BAR',
       +payload: UpdateDisconnectedBarPayload,
     |}
   | {|
       +type: 'REQUEST_ACCESS_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'REQUEST_ACCESS_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'REQUEST_ACCESS_SUCCESS',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'UPDATE_MULTIMEDIA_MESSAGE_MEDIA',
       +payload: UpdateMultimediaMessageMediaPayload,
     |}
   | {|
       +type: 'CREATE_LOCAL_MESSAGE',
       +payload: LocallyComposedMessageInfo,
     |}
   | {|
       +type: 'UPDATE_RELATIONSHIPS_STARTED',
       +payload?: void,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'UPDATE_RELATIONSHIPS_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'UPDATE_RELATIONSHIPS_SUCCESS',
       +payload: RelationshipErrors,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SET_THREAD_UNREAD_STATUS_STARTED',
       +payload: {|
         +threadID: string,
         +unread: boolean,
       |},
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SET_THREAD_UNREAD_STATUS_FAILED',
       +error: true,
       +payload: Error,
       +loadingInfo: LoadingInfo,
     |}
   | {|
       +type: 'SET_THREAD_UNREAD_STATUS_SUCCESS',
       +payload: SetThreadUnreadStatusPayload,
     |};
 
 export type ActionPayload = ?(Object | Array<*> | $ReadOnlyArray<*> | string);
 export type SuperAction = {
   type: string,
   payload?: ActionPayload,
   loadingInfo?: LoadingInfo,
   error?: boolean,
 };
 type ThunkedAction = (dispatch: Dispatch) => void;
 export type PromisedAction = (dispatch: Dispatch) => Promise<void>;
 export type Dispatch = ((promisedAction: PromisedAction) => Promise<void>) &
   ((thunkedAction: ThunkedAction) => void) &
   ((action: SuperAction) => boolean);
 
 // This is lifted from redux-persist/lib/constants.js
 // I don't want to add redux-persist to the web/server bundles...
 // import { REHYDRATE } from 'redux-persist';
 export const rehydrateActionType = 'persist/REHYDRATE';
diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
index f56dfaa92..e66fdd0bb 100644
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -1,451 +1,454 @@
 // @flow
 
 import { faFileImage } from '@fortawesome/free-regular-svg-icons';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import invariant from 'invariant';
 import _difference from 'lodash/fp/difference';
 import * as React from 'react';
 
 import { joinThreadActionTypes, joinThread } from 'lib/actions/thread-actions';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
 import { trimMessage } from 'lib/shared/message-utils';
 import {
   threadHasPermission,
   viewerIsMember,
   threadFrozenDueToViewerBlock,
   threadActualMembers,
   threadIsPending,
 } from 'lib/shared/thread-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 UserInfos } from 'lib/types/user-types';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 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 css from './chat-message-list.css';
 
 type BaseProps = {|
   +threadInfo: ThreadInfo,
   +inputState: InputState,
 |};
 type Props = {|
   ...BaseProps,
   // Redux state
   +viewerID: ?string,
   +joinThreadLoadingStatus: LoadingStatus,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: number,
   +isThreadActive: boolean,
   +userInfos: UserInfos,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +joinThread: (request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>,
 |};
 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();
     }
     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 && this.textarea) {
       this.textarea.focus();
     }
   }
 
   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) {
       let buttonContent;
       if (this.props.joinThreadLoadingStatus === 'loading') {
         buttonContent = (
           <LoadingIndicator
             status={this.props.joinThreadLoadingStatus}
             size="medium"
             color="white"
           />
         );
       } else {
         buttonContent = <span className={css.joinButtonText}>Join Thread</span>;
       }
       joinButton = (
         <div className={css.joinButtonContainer}>
           <a onClick={this.onClickJoin}>{buttonContent}</a>
         </div>
       );
     }
 
     const { pendingUploads, cancelPendingUpload } = this.props.inputState;
     const multimediaPreviews = pendingUploads.map((pendingUpload) => (
       <Multimedia
         uri={pendingUpload.uri}
         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 (threadHasPermission(this.props.threadInfo, threadPermissions.VOICED)) {
       const sendIconStyle = { color: `#${this.props.threadInfo.color}` };
       let multimediaInput = null;
       if (!threadIsPending(this.props.threadInfo.id)) {
         multimediaInput = (
           <a className={css.multimediaUpload} onClick={this.onMultimediaClick}>
             <input
               type="file"
               onChange={this.onMultimediaFileChange}
               ref={this.multimediaInputRef}
               accept={allowedMimeTypeString}
               multiple
             />
             <FontAwesomeIcon icon={faFileImage} />
           </a>
         );
       }
       content = (
         <div className={css.inputBarTextInput}>
           <textarea
             rows="1"
             placeholder="Send a message..."
             value={this.props.inputState.draft}
             onChange={this.onChangeMessageText}
             onKeyDown={this.onKeyDown}
             ref={this.textareaRef}
             autoFocus
           />
           {multimediaInput}
           <a className={css.send} onClick={this.onSend}>
             <FontAwesomeIcon
               icon={faChevronRight}
               className={css.sendButton}
               style={sendIconStyle}
             />
             Send
           </a>
         </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 {
       const defaultRoleID = Object.keys(this.props.threadInfo.roles).find(
         (roleID) => this.props.threadInfo.roles[roleID].isDefault,
       );
       invariant(
         defaultRoleID !== undefined,
         'all threads should have a default role',
       );
       const defaultRole = this.props.threadInfo.roles[defaultRoleID];
       const membersAreVoiced = !!defaultRole.permissions[
         threadPermissions.VOICED
       ];
       if (membersAreVoiced && canJoin) {
         content = (
           <span className={css.explanation}>
             Join this thread to send messages.
           </span>
         );
       } else {
         content = (
           <span className={css.explanation}>
             You don&apos;t have permission to send messages.
           </span>
         );
       }
     }
 
     return (
       <div className={css.inputBar}>
         {joinButton}
         {previews}
         {content}
       </div>
     );
   }
 
   textareaRef = (textarea: ?HTMLTextAreaElement) => {
     this.textarea = textarea;
     if (textarea) {
       textarea.focus();
     }
   };
 
   onChangeMessageText = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setDraft(event.currentTarget.value);
   };
 
   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>) => {
     if (event.keyCode === 13 && !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) {
       // TODO we should make the send button appear dynamically
       // iff trimmed text is nonempty, just like native
       this.dispatchTextMessageAction(text, nextLocalID);
       nextLocalID++;
     }
 
-    this.props.inputState.createMultimediaMessage(nextLocalID);
+    this.props.inputState.createMultimediaMessage(
+      nextLocalID,
+      this.props.threadInfo,
+    );
   }
 
   dispatchTextMessageAction(text: string, nextLocalID: number) {
     this.props.inputState.setDraft('');
 
     const localID = `local${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 = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     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,
 );
 
 export default React.memo<BaseProps>(function ConnectedChatInputBar(
   props: BaseProps,
 ) {
   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 calendarQuery = useSelector(nonThreadCalendarQuery);
   const dispatchActionPromise = useDispatchActionPromise();
   const callJoinThread = useServerCall(joinThread);
 
   return (
     <ChatInputBar
       {...props}
       viewerID={viewerID}
       joinThreadLoadingStatus={joinThreadLoadingStatus}
       calendarQuery={calendarQuery}
       nextLocalID={nextLocalID}
       isThreadActive={isThreadActive}
       userInfos={userInfos}
       dispatchActionPromise={dispatchActionPromise}
       joinThread={callJoinThread}
     />
   );
 });
diff --git a/web/chat/failed-send.react.js b/web/chat/failed-send.react.js
index 25a5e47e4..4018927d7 100644
--- a/web/chat/failed-send.react.js
+++ b/web/chat/failed-send.react.js
@@ -1,150 +1,150 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
 import { messageID } from 'lib/shared/message-utils';
 import {
   messageTypes,
   type RawComposableMessageInfo,
   assertComposableMessageType,
 } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 
 import { type InputState, InputStateContext } from '../input/input-state';
 import { useSelector } from '../redux/redux-utils';
 import css from './chat-message-list.css';
 import multimediaMessageSendFailed from './multimedia-message-send-failed';
 import textMessageSendFailed from './text-message-send-failed';
 
 type BaseProps = {|
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 |};
 type Props = {|
   ...BaseProps,
   // Redux state
   +rawMessageInfo: RawComposableMessageInfo,
   // withInputState
   +inputState: ?InputState,
 |};
 class FailedSend extends React.PureComponent<Props> {
   retryingText = false;
   retryingMedia = false;
 
   componentDidUpdate(prevProps: Props) {
     if (
       (this.props.rawMessageInfo.type === messageTypes.IMAGES ||
         this.props.rawMessageInfo.type === messageTypes.MULTIMEDIA) &&
       (prevProps.rawMessageInfo.type === messageTypes.IMAGES ||
         prevProps.rawMessageInfo.type === messageTypes.MULTIMEDIA)
     ) {
       const { inputState } = this.props;
       const prevInputState = prevProps.inputState;
       invariant(
         inputState && prevInputState,
         'inputState should be set in FailedSend',
       );
       const isFailed = multimediaMessageSendFailed(this.props.item, inputState);
       const wasFailed = multimediaMessageSendFailed(
         prevProps.item,
         prevInputState,
       );
       const isDone =
         this.props.item.messageInfo.id !== null &&
         this.props.item.messageInfo.id !== undefined;
       const wasDone =
         prevProps.item.messageInfo.id !== null &&
         prevProps.item.messageInfo.id !== undefined;
       if ((isFailed && !wasFailed) || (isDone && !wasDone)) {
         this.retryingMedia = false;
       }
     } else if (
       this.props.rawMessageInfo.type === messageTypes.TEXT &&
       prevProps.rawMessageInfo.type === messageTypes.TEXT
     ) {
       const isFailed = textMessageSendFailed(this.props.item);
       const wasFailed = textMessageSendFailed(prevProps.item);
       const isDone =
         this.props.item.messageInfo.id !== null &&
         this.props.item.messageInfo.id !== undefined;
       const wasDone =
         prevProps.item.messageInfo.id !== null &&
         prevProps.item.messageInfo.id !== undefined;
       if ((isFailed && !wasFailed) || (isDone && !wasDone)) {
         this.retryingText = false;
       }
     }
   }
 
   render() {
     return (
       <div className={css.failedSend}>
         <span>Delivery failed.</span>
         <a onClick={this.retrySend} className={css.retrySend}>
           {'Retry?'}
         </a>
       </div>
     );
   }
 
   retrySend = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.stopPropagation();
 
     const { inputState } = this.props;
     invariant(inputState, 'inputState should be set in FailedSend');
 
     const { rawMessageInfo } = this.props;
     if (rawMessageInfo.type === messageTypes.TEXT) {
       if (this.retryingText) {
         return;
       }
       this.retryingText = true;
       inputState.sendTextMessage(
         {
           ...rawMessageInfo,
           time: Date.now(),
         },
         this.props.threadInfo,
       );
     } else if (
       rawMessageInfo.type === messageTypes.IMAGES ||
       rawMessageInfo.type === messageTypes.MULTIMEDIA
     ) {
       const { localID } = rawMessageInfo;
       invariant(localID, 'failed RawMessageInfo should have localID');
       if (this.retryingMedia) {
         return;
       }
       this.retryingMedia = true;
-      inputState.retryMultimediaMessage(localID);
+      inputState.retryMultimediaMessage(localID, this.props.threadInfo);
     }
   };
 }
 
 export default React.memo<BaseProps>(function ConnectedFailedSend(
   props: BaseProps,
 ) {
   const { messageInfo } = props.item;
   assertComposableMessageType(messageInfo.type);
   const id = messageID(messageInfo);
   const rawMessageInfo = useSelector(
     (state) => state.messageStore.messages[id],
   );
   assertComposableMessageType(rawMessageInfo.type);
   invariant(
     rawMessageInfo.type === messageTypes.TEXT ||
       rawMessageInfo.type === messageTypes.IMAGES ||
       rawMessageInfo.type === messageTypes.MULTIMEDIA,
     'FailedSend should only be used for composable message types',
   );
   const inputState = React.useContext(InputStateContext);
   return (
     <FailedSend
       {...props}
       rawMessageInfo={rawMessageInfo}
       inputState={inputState}
     />
   );
 });
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index 88a1ee193..5a9c628fc 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1207 +1,1275 @@
 // @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,
   sendMultimediaMessage,
   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 { getNextLocalUploadID } from 'lib/media/media-utils';
 import { pendingToRealizedThreadIDsSelector } from 'lib/selectors/thread-selectors';
 import { createMediaMessageInfo } from 'lib/shared/message-utils';
 import {
   createRealThreadFromPendingThread,
   threadIsPending,
 } from 'lib/shared/thread-utils';
 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 {
   NewThreadRequest,
   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 { type PendingMultimediaUpload, InputStateContext } from './input-state';
 
 type BaseProps = {|
   +children: React.Node,
   +setModal: (modal: ?React.Node) => void,
 |};
 type Props = {|
   ...BaseProps,
   +activeChatThreadID: ?string,
   +viewerID: ?string,
   +messageStoreMessages: { [id: string]: RawMessageInfo },
   +exifRotate: boolean,
   +pendingToRealizedThreadIDs: $ReadOnlyMap<string, string>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +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: NewThreadRequest) => Promise<NewThreadResult>,
 |};
 type State = {|
   +pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
   +drafts: { [threadID: string]: string },
 |};
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
     drafts: {},
   };
   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.pendingToRealizedThreadIDs.get(threadID) ?? threadID;
       if (newThreadID !== threadID) {
         updated = true;
       }
       newState[newThreadID] = state[threadID];
     }
     return updated ? newState : null;
   }
 
   static getDerivedStateFromProps(props: Props, state: State) {
     const drafts = InputStateContainer.reassignToRealizedThreads(
       state.drafts,
       props,
     );
     const pendingUploads = InputStateContainer.reassignToRealizedThreads(
       state.pendingUploads,
       props,
     );
 
     if (!drafts && !pendingUploads) {
       return null;
     }
 
     const stateUpdate = {};
     if (drafts) {
       stateUpdate.drafts = drafts;
     }
     if (pendingUploads) {
       stateUpdate.pendingUploads = pendingUploads;
     }
     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('local')) {
           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('local') ||
           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
             ? 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;
   }
 
-  sendMultimediaMessage(messageInfo: RawMultimediaMessageInfo) {
+  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;
+      invariant(
+        newThreadID,
+        'createRealThreadFromPendingThread should return thread id or throw ' +
+          'an exception when handleError argument is not provided',
+      );
+    } 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,
+    };
     this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
-      this.sendMultimediaMessageAction(messageInfo),
+      this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
-      messageInfo,
+      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 createRealizedThread(threadInfo: ThreadInfo): Promise<string> {
     try {
-      let threadCreationPromise = this.pendingThreadCreations.get(
-        threadInfo.id,
-      );
-      if (!threadCreationPromise) {
-        threadCreationPromise = createRealThreadFromPendingThread({
-          threadInfo,
-          dispatchActionPromise: this.props.dispatchActionPromise,
-          createNewThread: this.props.newThread,
-          sourceMessageID: threadInfo.sourceMessageID,
-          viewerID: this.props.viewerID,
-        });
-        this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
-      }
-      const newThreadID = await threadCreationPromise;
+      const newThreadID = await this.startThreadCreation(threadInfo);
       invariant(
         newThreadID,
         'createRealThreadFromPendingThread should return thread id or throw ' +
           'an exception when handleError argument is not provided',
       );
       return newThreadID;
     } finally {
       // The promise is settled so we can clean the map to avoid a memory leak
       // and allow retries
       this.pendingThreadCreations.delete(threadInfo.id);
     }
   }
 
+  async startThreadCreation(threadInfo: ThreadInfo): Promise<?string> {
+    if (!threadIsPending(threadInfo.id)) {
+      return threadInfo.id;
+    }
+    let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
+    if (!threadCreationPromise) {
+      threadCreationPromise = createRealThreadFromPendingThread({
+        threadInfo,
+        dispatchActionPromise: this.props.dispatchActionPromise,
+        createNewThread: this.props.newThread,
+        sourceMessageID: threadInfo.sourceMessageID,
+        viewerID: this.props.viewerID,
+      });
+      this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
+    }
+    return threadCreationPromise;
+  }
+
   inputStateSelector = _memoize((threadID: string) =>
     createSelector(
       (state: State) => state.pendingUploads[threadID],
       (state: State) => state.drafts[threadID],
       (
         pendingUploads: ?{ [localUploadID: string]: PendingMultimediaUpload },
         draft: ?string,
       ) => {
         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 ? draft : '',
           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) =>
-            this.createMultimediaMessage(threadID, localID),
+          createMultimediaMessage: (localID: number, threadInfo: ThreadInfo) =>
+            this.createMultimediaMessage(localID, threadInfo),
           setDraft: (newDraft: string) => this.setDraft(threadID, newDraft),
           messageHasUploadFailure: (localMessageID: string) =>
             this.messageHasUploadFailure(assignedUploads[localMessageID]),
-          retryMultimediaMessage: (localMessageID: string) =>
+          retryMultimediaMessage: (
+            localMessageID: string,
+            threadInfo: ThreadInfo,
+          ) =>
             this.retryMultimediaMessage(
-              threadID,
               localMessageID,
+              threadInfo,
               assignedUploads[localMessageID],
             ),
           addReply: (message: string) => this.addReply(message),
           addReplyListener: this.addReplyListener,
           removeReplyListener: this.removeReplyListener,
         };
       },
     ),
   );
 
   getRealizedOrPendingThreadID(threadID: string): string {
     return this.props.pendingToRealizedThreadIDs.get(threadID) ?? threadID;
   }
 
   async appendFiles(
     threadID: string,
     files: $ReadOnlyArray<File>,
   ): Promise<boolean> {
     const selectionTime = Date.now();
     const { setModal } = this.props;
 
     const appendResults = await Promise.all(
       files.map((file) => this.appendFile(file, selectionTime)),
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
       setModal(<InvalidUploadModal setModal={setModal} />);
 
       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, this.props.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: null,
           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, e);
     }
     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('local')) {
         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, e: any) {
     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 {};
       }
       const failed = e instanceof Error && e.message ? e.message : 'failed';
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed,
               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,
   ) {
     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.createRealizedThread(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;
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
     };
     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(threadID: string, localID: number) {
+  createMultimediaMessage(localID: number, threadInfo: ThreadInfo) {
     const localMessageID = `local${localID}`;
+    this.startThreadCreation(threadInfo);
+
     this.setState((prevState) => {
-      const newThreadID = this.getRealizedOrPendingThreadID(threadID);
+      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) {
     this.setState((prevState) => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       return {
         drafts: {
           ...prevState.drafts,
           [newThreadID]: draft,
         },
       };
     });
   }
 
   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(
-    threadID: string,
     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(threadID);
+      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: null,
             progressPercent: 0,
             abort: null,
           };
           pendingUploadChanged = true;
         } else {
           newPendingUploads[localID] = pendingUpload;
         }
       }
       if (!pendingUploadChanged) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
 
-    this.uploadFiles(threadID, uploadsToRetry);
+    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;
     const inputState = activeChatThreadID
       ? this.inputStateSelector(activeChatThreadID)(this.state)
       : null;
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 export default React.memo<BaseProps>(function ConnectedInputStateContainer(
   props: BaseProps,
 ) {
   const exifRotate = useSelector((state) => {
     const browser = detectBrowser(state.userAgent);
     return !browser || (browser.name !== 'safari' && browser.name !== 'chrome');
   });
   const activeChatThreadID = useSelector(
     (state) => state.navInfo.activeChatThreadID,
   );
   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 callUploadMultimedia = useServerCall(uploadMultimedia);
   const callDeleteUpload = useServerCall(deleteUpload);
   const callSendMultimediaMessage = useServerCall(sendMultimediaMessage);
   const callSendTextMessage = useServerCall(sendTextMessage);
   const callNewThread = useServerCall(newThread);
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
 
   return (
     <InputStateContainer
       {...props}
       activeChatThreadID={activeChatThreadID}
       viewerID={viewerID}
       messageStoreMessages={messageStoreMessages}
       exifRotate={exifRotate}
       pendingToRealizedThreadIDs={pendingToRealizedThreadIDs}
       uploadMultimedia={callUploadMultimedia}
       deleteUpload={callDeleteUpload}
       sendMultimediaMessage={callSendMultimediaMessage}
       sendTextMessage={callSendTextMessage}
       newThread={callNewThread}
       dispatch={dispatch}
       dispatchActionPromise={dispatchActionPromise}
     />
   );
 });
diff --git a/web/input/input-state.js b/web/input/input-state.js
index 8616523a0..99eca113a 100644
--- a/web/input/input-state.js
+++ b/web/input/input-state.js
@@ -1,61 +1,64 @@
 // @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';
 
 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 truthy if the upload fails for whatever reason
   failed: ?string,
   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,
 |};
 
 // This type represents the input state for a particular thread
 export type InputState = {|
   pendingUploads: $ReadOnlyArray<PendingMultimediaUpload>,
   assignedUploads: {
     [messageID: string]: $ReadOnlyArray<PendingMultimediaUpload>,
   },
   draft: string,
   appendFiles: (files: $ReadOnlyArray<File>) => Promise<boolean>,
   cancelPendingUpload: (localUploadID: string) => void,
   sendTextMessage: (
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
   ) => Promise<void>,
-  createMultimediaMessage: (localID: number) => void,
+  createMultimediaMessage: (localID: number, threadInfo: ThreadInfo) => void,
   setDraft: (draft: string) => void,
   messageHasUploadFailure: (localMessageID: string) => boolean,
-  retryMultimediaMessage: (localMessageID: string) => void,
+  retryMultimediaMessage: (
+    localMessageID: string,
+    threadInfo: ThreadInfo,
+  ) => void,
   addReply: (text: string) => void,
   addReplyListener: ((message: string) => void) => void,
   removeReplyListener: ((message: string) => void) => void,
 |};
 
 const InputStateContext = React.createContext<?InputState>(null);
 
 export { InputStateContext };