diff --git a/lib/reducers/entry-reducer.js b/lib/reducers/entry-reducer.js
index 3a15cac3b..1765647f0 100644
--- a/lib/reducers/entry-reducer.js
+++ b/lib/reducers/entry-reducer.js
@@ -1,726 +1,728 @@
 // @flow
 
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter.js';
 import _flow from 'lodash/fp/flow.js';
 import _groupBy from 'lodash/fp/groupBy.js';
 import _isEqual from 'lodash/fp/isEqual.js';
 import _map from 'lodash/fp/map.js';
 import _mapKeys from 'lodash/fp/mapKeys.js';
 import _mapValues from 'lodash/fp/mapValues.js';
 import _omitBy from 'lodash/fp/omitBy.js';
 import _pickBy from 'lodash/fp/pickBy.js';
 import _sortBy from 'lodash/fp/sortBy.js';
 import _union from 'lodash/fp/union.js';
 
 import {
   fetchEntriesActionTypes,
   updateCalendarQueryActionTypes,
   createLocalEntryActionType,
   createEntryActionTypes,
   saveEntryActionTypes,
   concurrentModificationResetActionType,
   deleteEntryActionTypes,
   fetchRevisionsForEntryActionTypes,
   restoreEntryActionTypes,
 } from '../actions/entry-actions.js';
 import { siweAuthActionTypes } from '../actions/siwe-actions.js';
 import {
   deleteThreadActionTypes,
   leaveThreadActionTypes,
   joinThreadActionTypes,
   changeThreadSettingsActionTypes,
   removeUsersFromThreadActionTypes,
   changeThreadMemberRolesActionTypes,
   newThreadActionTypes,
 } from '../actions/thread-actions.js';
 import {
   logOutActionTypes,
   deleteAccountActionTypes,
   logInActionTypes,
 } from '../actions/user-actions.js';
 import {
   entryID,
   filterRawEntryInfosByCalendarQuery,
   serverEntryInfosObject,
 } from '../shared/entry-utils.js';
 import { threadInFilterList } from '../shared/thread-utils.js';
 import type {
   RawEntryInfo,
   EntryStore,
   CalendarQuery,
 } from '../types/entry-types.js';
 import type { BaseAction } from '../types/redux-types.js';
 import {
   type ClientEntryInconsistencyReportCreationRequest,
   reportTypes,
 } from '../types/report-types.js';
 import {
   serverRequestTypes,
   processServerRequestsActionType,
 } from '../types/request-types.js';
 import {
   fullStateSyncActionType,
   incrementalStateSyncActionType,
 } from '../types/socket-types.js';
 import { type RawThreadInfo } from '../types/thread-types.js';
 import { updateTypes } from '../types/update-types-enum.js';
 import {
   type ClientUpdateInfo,
   processUpdatesActionType,
 } from '../types/update-types.js';
 import { actionLogger } from '../utils/action-logger.js';
 import { setNewSessionActionType } from '../utils/action-utils.js';
 import { getConfig } from '../utils/config.js';
 import { dateString } from '../utils/date-utils.js';
 import { values } from '../utils/objects.js';
+import { generateReportID } from '../utils/report-utils.js';
 import { sanitizeActionSecrets } from '../utils/sanitization.js';
 
 function daysToEntriesFromEntryInfos(
   entryInfos: $ReadOnlyArray<RawEntryInfo>,
 ): { [day: string]: string[] } {
   return _flow(
     _sortBy((['id', 'localID']: $ReadOnlyArray<string>)),
     _groupBy((entryInfo: RawEntryInfo) =>
       dateString(entryInfo.year, entryInfo.month, entryInfo.day),
     ),
     _mapValues((entryInfoGroup: $ReadOnlyArray<RawEntryInfo>) =>
       _map(entryID)(entryInfoGroup),
     ),
   )([...entryInfos]);
 }
 
 function filterExistingDaysToEntriesWithNewEntryInfos(
   oldDaysToEntries: { +[id: string]: string[] },
   newEntryInfos: { +[id: string]: RawEntryInfo },
 ) {
   return _mapValues((entryIDs: string[]) =>
     _filter((id: string) => newEntryInfos[id])(entryIDs),
   )(oldDaysToEntries);
 }
 
 function mergeNewEntryInfos(
   currentEntryInfos: { +[id: string]: RawEntryInfo },
   currentDaysToEntries: ?{ +[day: string]: string[] },
   newEntryInfos: $ReadOnlyArray<RawEntryInfo>,
   threadInfos: { +[id: string]: RawThreadInfo },
 ) {
   const mergedEntryInfos = {};
   let someEntryUpdated = false;
 
   for (const rawEntryInfo of newEntryInfos) {
     const serverID = rawEntryInfo.id;
     invariant(serverID, 'new entryInfos should have serverID');
     const currentEntryInfo = currentEntryInfos[serverID];
     let newEntryInfo;
     if (currentEntryInfo && currentEntryInfo.localID) {
       newEntryInfo = {
         id: serverID,
         // Try to preserve localIDs. This is because we use them as React
         // keys and changing React keys leads to loss of component state.
         localID: currentEntryInfo.localID,
         threadID: rawEntryInfo.threadID,
         text: rawEntryInfo.text,
         year: rawEntryInfo.year,
         month: rawEntryInfo.month,
         day: rawEntryInfo.day,
         creationTime: rawEntryInfo.creationTime,
         creatorID: rawEntryInfo.creatorID,
         deleted: rawEntryInfo.deleted,
       };
     } else {
       newEntryInfo = {
         id: serverID,
         threadID: rawEntryInfo.threadID,
         text: rawEntryInfo.text,
         year: rawEntryInfo.year,
         month: rawEntryInfo.month,
         day: rawEntryInfo.day,
         creationTime: rawEntryInfo.creationTime,
         creatorID: rawEntryInfo.creatorID,
         deleted: rawEntryInfo.deleted,
       };
     }
 
     if (_isEqual(currentEntryInfo)(newEntryInfo)) {
       mergedEntryInfos[serverID] = currentEntryInfo;
     } else {
       mergedEntryInfos[serverID] = newEntryInfo;
       someEntryUpdated = true;
     }
   }
 
   for (const id in currentEntryInfos) {
     const newEntryInfo = mergedEntryInfos[id];
     if (!newEntryInfo) {
       mergedEntryInfos[id] = currentEntryInfos[id];
     }
   }
 
   for (const id in mergedEntryInfos) {
     const entryInfo = mergedEntryInfos[id];
     if (!threadInFilterList(threadInfos[entryInfo.threadID])) {
       someEntryUpdated = true;
       delete mergedEntryInfos[id];
     }
   }
 
   const daysToEntries =
     !currentDaysToEntries || someEntryUpdated
       ? daysToEntriesFromEntryInfos(values(mergedEntryInfos))
       : currentDaysToEntries;
   const entryInfos = someEntryUpdated ? mergedEntryInfos : currentEntryInfos;
   return [entryInfos, daysToEntries];
 }
 
 function reduceEntryInfos(
   entryStore: EntryStore,
   action: BaseAction,
   newThreadInfos: { +[id: string]: RawThreadInfo },
 ): [EntryStore, $ReadOnlyArray<ClientEntryInconsistencyReportCreationRequest>] {
   const { entryInfos, daysToEntries, lastUserInteractionCalendar } = entryStore;
   if (
     action.type === logOutActionTypes.success ||
     action.type === deleteAccountActionTypes.success ||
     action.type === deleteThreadActionTypes.success ||
     action.type === leaveThreadActionTypes.success
   ) {
     const authorizedThreadInfos = _pickBy(threadInFilterList)(newThreadInfos);
     const newEntryInfos = _pickBy(
       (entry: RawEntryInfo) => authorizedThreadInfos[entry.threadID],
     )(entryInfos);
     const newLastUserInteractionCalendar =
       action.type === logOutActionTypes.success ||
       action.type === deleteAccountActionTypes.success
         ? 0
         : lastUserInteractionCalendar;
     if (Object.keys(newEntryInfos).length === Object.keys(entryInfos).length) {
       return [
         {
           entryInfos,
           daysToEntries,
           lastUserInteractionCalendar: newLastUserInteractionCalendar,
         },
         [],
       ];
     }
     const newDaysToEntries = filterExistingDaysToEntriesWithNewEntryInfos(
       daysToEntries,
       newEntryInfos,
     );
     return [
       {
         entryInfos: newEntryInfos,
         daysToEntries: newDaysToEntries,
         lastUserInteractionCalendar: newLastUserInteractionCalendar,
       },
       [],
     ];
   } else if (action.type === setNewSessionActionType) {
     const authorizedThreadInfos = _pickBy(threadInFilterList)(newThreadInfos);
     const newEntryInfos = _pickBy(
       (entry: RawEntryInfo) => authorizedThreadInfos[entry.threadID],
     )(entryInfos);
     const newDaysToEntries = filterExistingDaysToEntriesWithNewEntryInfos(
       daysToEntries,
       newEntryInfos,
     );
     const newLastUserInteractionCalendar = action.payload.sessionChange
       .cookieInvalidated
       ? 0
       : lastUserInteractionCalendar;
     if (Object.keys(newEntryInfos).length === Object.keys(entryInfos).length) {
       return [
         {
           entryInfos,
           daysToEntries,
           lastUserInteractionCalendar: newLastUserInteractionCalendar,
         },
         [],
       ];
     }
     return [
       {
         entryInfos: newEntryInfos,
         daysToEntries: newDaysToEntries,
         lastUserInteractionCalendar: newLastUserInteractionCalendar,
       },
       [],
     ];
   } else if (action.type === fetchEntriesActionTypes.success) {
     const [updatedEntryInfos, updatedDaysToEntries] = mergeNewEntryInfos(
       entryInfos,
       daysToEntries,
       action.payload.rawEntryInfos,
       newThreadInfos,
     );
     return [
       {
         entryInfos: updatedEntryInfos,
         daysToEntries: updatedDaysToEntries,
         lastUserInteractionCalendar,
       },
       [],
     ];
   } else if (
     action.type === updateCalendarQueryActionTypes.started &&
     action.payload &&
     action.payload.calendarQuery
   ) {
     return [
       {
         entryInfos,
         daysToEntries,
         lastUserInteractionCalendar: Date.now(),
       },
       [],
     ];
   } else if (action.type === updateCalendarQueryActionTypes.success) {
     const newLastUserInteractionCalendar = action.payload.calendarQuery
       ? Date.now()
       : lastUserInteractionCalendar;
     const [updatedEntryInfos, updatedDaysToEntries] = mergeNewEntryInfos(
       entryInfos,
       daysToEntries,
       action.payload.rawEntryInfos,
       newThreadInfos,
     );
     const deletionMarkedEntryInfos = markDeletedEntries(
       updatedEntryInfos,
       action.payload.deletedEntryIDs,
     );
     return [
       {
         entryInfos: deletionMarkedEntryInfos,
         daysToEntries: updatedDaysToEntries,
         lastUserInteractionCalendar: newLastUserInteractionCalendar,
       },
       [],
     ];
   } else if (action.type === createLocalEntryActionType) {
     const entryInfo = action.payload;
     const localID = entryInfo.localID;
     invariant(localID, 'localID should be set in CREATE_LOCAL_ENTRY');
     const newEntryInfos = {
       ...entryInfos,
       [localID]: entryInfo,
     };
     const dayString = dateString(
       entryInfo.year,
       entryInfo.month,
       entryInfo.day,
     );
     const newDaysToEntries = {
       ...daysToEntries,
       [dayString]: _union([localID])(daysToEntries[dayString]),
     };
     return [
       {
         entryInfos: newEntryInfos,
         daysToEntries: newDaysToEntries,
         lastUserInteractionCalendar: Date.now(),
       },
       [],
     ];
   } else if (action.type === createEntryActionTypes.success) {
     const localID = action.payload.localID;
     const serverID = action.payload.entryID;
     // If an entry with this serverID already got into the store somehow
     // (likely through an unrelated request), we need to dedup them.
     let rekeyedEntryInfos;
     if (entryInfos[serverID]) {
       // It's fair to assume the serverID entry is newer than the localID
       // entry, and this probably won't happen often, so for now we can just
       // keep the serverID entry.
       rekeyedEntryInfos = _omitBy(
         (candidate: RawEntryInfo) =>
           !candidate.id && candidate.localID === localID,
       )(entryInfos);
     } else if (entryInfos[localID]) {
       rekeyedEntryInfos = _mapKeys((oldKey: string) =>
         entryInfos[oldKey].localID === localID ? serverID : oldKey,
       )(entryInfos);
     } else {
       // This happens if the entry is deauthorized before it's saved
       return [entryStore, []];
     }
 
     const [updatedEntryInfos, updatedDaysToEntries] = mergeNewEntryInfos(
       rekeyedEntryInfos,
       null,
       mergeUpdateEntryInfos([], action.payload.updatesResult.viewerUpdates),
       newThreadInfos,
     );
 
     return [
       {
         entryInfos: updatedEntryInfos,
         daysToEntries: updatedDaysToEntries,
         lastUserInteractionCalendar: Date.now(),
       },
       [],
     ];
   } else if (action.type === saveEntryActionTypes.success) {
     const serverID = action.payload.entryID;
     if (
       !entryInfos[serverID] ||
       !threadInFilterList(newThreadInfos[entryInfos[serverID].threadID])
     ) {
       // This happens if the entry is deauthorized before it's saved
       return [entryStore, []];
     }
 
     const [updatedEntryInfos, updatedDaysToEntries] = mergeNewEntryInfos(
       entryInfos,
       daysToEntries,
       mergeUpdateEntryInfos([], action.payload.updatesResult.viewerUpdates),
       newThreadInfos,
     );
 
     return [
       {
         entryInfos: updatedEntryInfos,
         daysToEntries: updatedDaysToEntries,
         lastUserInteractionCalendar: Date.now(),
       },
       [],
     ];
   } else if (action.type === concurrentModificationResetActionType) {
     const { payload } = action;
     if (
       !entryInfos[payload.id] ||
       !threadInFilterList(newThreadInfos[entryInfos[payload.id].threadID])
     ) {
       // This happens if the entry is deauthorized before it's restored
       return [entryStore, []];
     }
     const newEntryInfos = {
       ...entryInfos,
       [payload.id]: {
         ...entryInfos[payload.id],
         text: payload.dbText,
       },
     };
     return [
       {
         entryInfos: newEntryInfos,
         daysToEntries,
         lastUserInteractionCalendar,
       },
       [],
     ];
   } else if (action.type === deleteEntryActionTypes.started) {
     const payload = action.payload;
     const id =
       payload.serverID && entryInfos[payload.serverID]
         ? payload.serverID
         : payload.localID;
     invariant(id, 'either serverID or localID should be set');
     const newEntryInfos = {
       ...entryInfos,
       [id]: {
         ...entryInfos[id],
         deleted: true,
       },
     };
     return [
       {
         entryInfos: newEntryInfos,
         daysToEntries,
         lastUserInteractionCalendar: Date.now(),
       },
       [],
     ];
   } else if (action.type === deleteEntryActionTypes.success && action.payload) {
     const { payload } = action;
     const [updatedEntryInfos, updatedDaysToEntries] = mergeNewEntryInfos(
       entryInfos,
       daysToEntries,
       mergeUpdateEntryInfos([], payload.updatesResult.viewerUpdates),
       newThreadInfos,
     );
     return [
       {
         entryInfos: updatedEntryInfos,
         daysToEntries: updatedDaysToEntries,
         lastUserInteractionCalendar,
       },
       [],
     ];
   } else if (action.type === fetchRevisionsForEntryActionTypes.success) {
     const id = action.payload.entryID;
     if (
       !entryInfos[id] ||
       !threadInFilterList(newThreadInfos[entryInfos[id].threadID])
     ) {
       // This happens if the entry is deauthorized before it's restored
       return [entryStore, []];
     }
     // Make sure the entry is in sync with its latest revision
     const newEntryInfos = {
       ...entryInfos,
       [id]: {
         ...entryInfos[id],
         text: action.payload.text,
         deleted: action.payload.deleted,
       },
     };
     return [
       {
         entryInfos: newEntryInfos,
         daysToEntries,
         lastUserInteractionCalendar,
       },
       [],
     ];
   } else if (action.type === restoreEntryActionTypes.success) {
     const [updatedEntryInfos, updatedDaysToEntries] = mergeNewEntryInfos(
       entryInfos,
       daysToEntries,
       mergeUpdateEntryInfos([], action.payload.updatesResult.viewerUpdates),
       newThreadInfos,
     );
     return [
       {
         entryInfos: updatedEntryInfos,
         daysToEntries: updatedDaysToEntries,
         lastUserInteractionCalendar: Date.now(),
       },
       [],
     ];
   } else if (
     action.type === logInActionTypes.success ||
     action.type === siweAuthActionTypes.success
   ) {
     const { calendarResult } = action.payload;
     if (calendarResult) {
       const [updatedEntryInfos, updatedDaysToEntries] = mergeNewEntryInfos(
         entryInfos,
         daysToEntries,
         calendarResult.rawEntryInfos,
         newThreadInfos,
       );
       return [
         {
           entryInfos: updatedEntryInfos,
           daysToEntries: updatedDaysToEntries,
           lastUserInteractionCalendar,
         },
         [],
       ];
     }
   } else if (action.type === incrementalStateSyncActionType) {
     const [updatedEntryInfos, updatedDaysToEntries] = mergeNewEntryInfos(
       entryInfos,
       daysToEntries,
       mergeUpdateEntryInfos(
         action.payload.deltaEntryInfos,
         action.payload.updatesResult.newUpdates,
       ),
       newThreadInfos,
     );
     const deletionMarkedEntryInfos = markDeletedEntries(
       updatedEntryInfos,
       action.payload.deletedEntryIDs,
     );
     return [
       {
         entryInfos: deletionMarkedEntryInfos,
         daysToEntries: updatedDaysToEntries,
         lastUserInteractionCalendar,
       },
       [],
     ];
   } else if (
     action.type === processUpdatesActionType ||
     action.type === joinThreadActionTypes.success ||
     action.type === newThreadActionTypes.success
   ) {
     const [updatedEntryInfos, updatedDaysToEntries] = mergeNewEntryInfos(
       entryInfos,
       daysToEntries,
       mergeUpdateEntryInfos([], action.payload.updatesResult.newUpdates),
       newThreadInfos,
     );
     return [
       {
         entryInfos: updatedEntryInfos,
         daysToEntries: updatedDaysToEntries,
         lastUserInteractionCalendar,
       },
       [],
     ];
   } else if (action.type === fullStateSyncActionType) {
     const [updatedEntryInfos, updatedDaysToEntries] = mergeNewEntryInfos(
       entryInfos,
       daysToEntries,
       action.payload.rawEntryInfos,
       newThreadInfos,
     );
     return [
       {
         entryInfos: updatedEntryInfos,
         daysToEntries: updatedDaysToEntries,
         lastUserInteractionCalendar,
       },
       [],
     ];
   } else if (
     action.type === changeThreadSettingsActionTypes.success ||
     action.type === removeUsersFromThreadActionTypes.success ||
     action.type === changeThreadMemberRolesActionTypes.success
   ) {
     const authorizedThreadInfos = _pickBy(threadInFilterList)(newThreadInfos);
     const newEntryInfos = _pickBy(
       (entry: RawEntryInfo) => authorizedThreadInfos[entry.threadID],
     )(entryInfos);
     if (Object.keys(newEntryInfos).length === Object.keys(entryInfos).length) {
       return [entryStore, []];
     }
     const newDaysToEntries = filterExistingDaysToEntriesWithNewEntryInfos(
       daysToEntries,
       newEntryInfos,
     );
     return [
       {
         entryInfos: newEntryInfos,
         daysToEntries: newDaysToEntries,
         lastUserInteractionCalendar,
       },
       [],
     ];
   } else if (action.type === processServerRequestsActionType) {
     const checkStateRequest = action.payload.serverRequests.find(
       candidate => candidate.type === serverRequestTypes.CHECK_STATE,
     );
     if (!checkStateRequest || !checkStateRequest.stateChanges) {
       return [entryStore, []];
     }
     const { rawEntryInfos, deleteEntryIDs } = checkStateRequest.stateChanges;
     if (!rawEntryInfos && !deleteEntryIDs) {
       return [entryStore, []];
     }
 
     let updatedEntryInfos = { ...entryInfos };
     if (deleteEntryIDs) {
       for (const deleteEntryID of deleteEntryIDs) {
         delete updatedEntryInfos[deleteEntryID];
       }
     }
 
     let updatedDaysToEntries;
     if (rawEntryInfos) {
       [updatedEntryInfos, updatedDaysToEntries] = mergeNewEntryInfos(
         updatedEntryInfos,
         null,
         rawEntryInfos,
         newThreadInfos,
       );
     } else {
       updatedDaysToEntries = daysToEntriesFromEntryInfos(
         values(updatedEntryInfos),
       );
     }
 
     const newInconsistencies = findInconsistencies(
       action,
       entryInfos,
       updatedEntryInfos,
       action.payload.calendarQuery,
     );
 
     return [
       {
         entryInfos: updatedEntryInfos,
         daysToEntries: updatedDaysToEntries,
         lastUserInteractionCalendar,
       },
       newInconsistencies,
     ];
   }
   return [entryStore, []];
 }
 
 function mergeUpdateEntryInfos(
   entryInfos: $ReadOnlyArray<RawEntryInfo>,
   newUpdates: $ReadOnlyArray<ClientUpdateInfo>,
 ): RawEntryInfo[] {
   const entryIDs = new Set(entryInfos.map(entryInfo => entryInfo.id));
   const mergedEntryInfos = [...entryInfos];
   for (const updateInfo of newUpdates) {
     if (updateInfo.type === updateTypes.JOIN_THREAD) {
       for (const entryInfo of updateInfo.rawEntryInfos) {
         if (entryIDs.has(entryInfo.id)) {
           continue;
         }
         mergedEntryInfos.push(entryInfo);
         entryIDs.add(entryInfo.id);
       }
     } else if (updateInfo.type === updateTypes.UPDATE_ENTRY) {
       const { entryInfo } = updateInfo;
       if (entryIDs.has(entryInfo.id)) {
         continue;
       }
       mergedEntryInfos.push(entryInfo);
       entryIDs.add(entryInfo.id);
     }
   }
   return mergedEntryInfos;
 }
 
 const emptyArray = [];
 function findInconsistencies(
   action: BaseAction,
   beforeStateCheck: { +[id: string]: RawEntryInfo },
   afterStateCheck: { +[id: string]: RawEntryInfo },
   calendarQuery: CalendarQuery,
 ): ClientEntryInconsistencyReportCreationRequest[] {
   // We don't want to bother reporting an inconsistency if it's just because of
   // extraneous EntryInfos (not within the current calendarQuery) on either side
   const filteredBeforeResult = filterRawEntryInfosByCalendarQuery(
     serverEntryInfosObject(values(beforeStateCheck)),
     calendarQuery,
   );
   const filteredAfterResult = filterRawEntryInfosByCalendarQuery(
     serverEntryInfosObject(values(afterStateCheck)),
     calendarQuery,
   );
   if (_isEqual(filteredBeforeResult)(filteredAfterResult)) {
     return emptyArray;
   }
   return [
     {
       type: reportTypes.ENTRY_INCONSISTENCY,
       platformDetails: getConfig().platformDetails,
       beforeAction: beforeStateCheck,
       action: sanitizeActionSecrets(action),
       calendarQuery,
       pushResult: afterStateCheck,
       lastActions: actionLogger.interestingActionSummaries,
       time: Date.now(),
+      id: generateReportID(),
     },
   ];
 }
 
 function markDeletedEntries(
   entryInfos: { +[id: string]: RawEntryInfo },
   deletedEntryIDs: $ReadOnlyArray<string>,
 ): { +[id: string]: RawEntryInfo } {
   let result = entryInfos;
   for (const deletedEntryID of deletedEntryIDs) {
     const entryInfo = entryInfos[deletedEntryID];
     if (!entryInfo || entryInfo.deleted) {
       continue;
     }
     result = {
       ...result,
       [deletedEntryID]: {
         ...entryInfo,
         deleted: true,
       },
     };
   }
   return result;
 }
 
 export { daysToEntriesFromEntryInfos, reduceEntryInfos };
diff --git a/lib/reducers/thread-reducer.js b/lib/reducers/thread-reducer.js
index 10aef0cad..383be000d 100644
--- a/lib/reducers/thread-reducer.js
+++ b/lib/reducers/thread-reducer.js
@@ -1,510 +1,512 @@
 // @flow
 
 import _isEqual from 'lodash/fp/isEqual.js';
 
 import {
   setThreadUnreadStatusActionTypes,
   updateActivityActionTypes,
 } from '../actions/activity-actions.js';
 import { setClientDBStoreActionType } from '../actions/client-db-store-actions.js';
 import { saveMessagesActionType } from '../actions/message-actions.js';
 import { siweAuthActionTypes } from '../actions/siwe-actions.js';
 import {
   changeThreadSettingsActionTypes,
   deleteThreadActionTypes,
   newThreadActionTypes,
   removeUsersFromThreadActionTypes,
   changeThreadMemberRolesActionTypes,
   joinThreadActionTypes,
   leaveThreadActionTypes,
 } from '../actions/thread-actions.js';
 import {
   logOutActionTypes,
   deleteAccountActionTypes,
   logInActionTypes,
   registerActionTypes,
   updateSubscriptionActionTypes,
 } from '../actions/user-actions.js';
 import type { BaseAction } from '../types/redux-types.js';
 import {
   type ClientThreadInconsistencyReportCreationRequest,
   reportTypes,
 } from '../types/report-types.js';
 import {
   serverRequestTypes,
   processServerRequestsActionType,
 } from '../types/request-types.js';
 import {
   fullStateSyncActionType,
   incrementalStateSyncActionType,
 } from '../types/socket-types.js';
 import type {
   RawThreadInfo,
   ThreadStore,
   ThreadStoreOperation,
 } from '../types/thread-types.js';
 import { updateTypes } from '../types/update-types-enum.js';
 import {
   type ClientUpdateInfo,
   processUpdatesActionType,
 } from '../types/update-types.js';
 import { actionLogger } from '../utils/action-logger.js';
 import { setNewSessionActionType } from '../utils/action-utils.js';
 import { getConfig } from '../utils/config.js';
+import { generateReportID } from '../utils/report-utils.js';
 import { sanitizeActionSecrets } from '../utils/sanitization.js';
 
 function generateOpsForThreadUpdates(
   threadInfos: { +[id: string]: RawThreadInfo },
   payload: {
     +updatesResult: { +newUpdates: $ReadOnlyArray<ClientUpdateInfo>, ... },
     ...
   },
 ): $ReadOnlyArray<ThreadStoreOperation> {
   const threadOperations: ThreadStoreOperation[] = [];
   for (const update of payload.updatesResult.newUpdates) {
     if (
       (update.type === updateTypes.UPDATE_THREAD ||
         update.type === updateTypes.JOIN_THREAD) &&
       !_isEqual(threadInfos[update.threadInfo.id])(update.threadInfo)
     ) {
       threadOperations.push({
         type: 'replace',
         payload: {
           id: update.threadInfo.id,
           threadInfo: update.threadInfo,
         },
       });
     } else if (
       update.type === updateTypes.UPDATE_THREAD_READ_STATUS &&
       threadInfos[update.threadID] &&
       threadInfos[update.threadID].currentUser.unread !== update.unread
     ) {
       const updatedThread = {
         ...threadInfos[update.threadID],
         currentUser: {
           ...threadInfos[update.threadID].currentUser,
           unread: update.unread,
         },
       };
       threadOperations.push({
         type: 'replace',
         payload: {
           id: update.threadID,
           threadInfo: updatedThread,
         },
       });
     } else if (
       update.type === updateTypes.DELETE_THREAD &&
       threadInfos[update.threadID]
     ) {
       threadOperations.push({
         type: 'remove',
         payload: {
           ids: [update.threadID],
         },
       });
     } else if (update.type === updateTypes.DELETE_ACCOUNT) {
       for (const threadID in threadInfos) {
         const threadInfo = threadInfos[threadID];
         const newMembers = threadInfo.members.filter(
           member => member.id !== update.deletedUserID,
         );
         if (newMembers.length < threadInfo.members.length) {
           const updatedThread = {
             ...threadInfo,
             members: newMembers,
           };
           threadOperations.push({
             type: 'replace',
             payload: {
               id: threadID,
               threadInfo: updatedThread,
             },
           });
         }
       }
     }
   }
   return threadOperations;
 }
 
 function findInconsistencies(
   action: BaseAction,
   beforeStateCheck: { +[id: string]: RawThreadInfo },
   afterStateCheck: { +[id: string]: RawThreadInfo },
 ): ClientThreadInconsistencyReportCreationRequest[] {
   if (_isEqual(beforeStateCheck)(afterStateCheck)) {
     return [];
   }
   return [
     {
       type: reportTypes.THREAD_INCONSISTENCY,
       platformDetails: getConfig().platformDetails,
       beforeAction: beforeStateCheck,
       action: sanitizeActionSecrets(action),
       pushResult: afterStateCheck,
       lastActions: actionLogger.interestingActionSummaries,
       time: Date.now(),
+      id: generateReportID(),
     },
   ];
 }
 
 function reduceThreadInfos(
   state: ThreadStore,
   action: BaseAction,
 ): {
   threadStore: ThreadStore,
   newThreadInconsistencies: $ReadOnlyArray<ClientThreadInconsistencyReportCreationRequest>,
   threadStoreOperations: $ReadOnlyArray<ThreadStoreOperation>,
 } {
   if (
     action.type === logInActionTypes.success ||
     action.type === siweAuthActionTypes.success ||
     action.type === registerActionTypes.success ||
     action.type === fullStateSyncActionType
   ) {
     const newThreadInfos = action.payload.threadInfos;
     const threadStoreOperations = [
       {
         type: 'remove_all',
       },
       ...Object.keys(newThreadInfos).map((id: string) => ({
         type: 'replace',
         payload: { id, threadInfo: newThreadInfos[id] },
       })),
     ];
     const updatedThreadStore = processThreadStoreOperations(
       state,
       threadStoreOperations,
     );
     return {
       threadStore: updatedThreadStore,
       newThreadInconsistencies: [],
       threadStoreOperations,
     };
   } else if (
     action.type === logOutActionTypes.success ||
     action.type === deleteAccountActionTypes.success ||
     (action.type === setNewSessionActionType &&
       action.payload.sessionChange.cookieInvalidated)
   ) {
     if (Object.keys(state.threadInfos).length === 0) {
       return {
         threadStore: state,
         newThreadInconsistencies: [],
         threadStoreOperations: [],
       };
     }
     const threadStoreOperations = [
       {
         type: 'remove_all',
       },
     ];
     const updatedThreadStore = processThreadStoreOperations(
       state,
       threadStoreOperations,
     );
     return {
       threadStore: updatedThreadStore,
       newThreadInconsistencies: [],
       threadStoreOperations,
     };
   } else if (
     action.type === joinThreadActionTypes.success ||
     action.type === leaveThreadActionTypes.success ||
     action.type === deleteThreadActionTypes.success ||
     action.type === changeThreadSettingsActionTypes.success ||
     action.type === removeUsersFromThreadActionTypes.success ||
     action.type === changeThreadMemberRolesActionTypes.success ||
     action.type === incrementalStateSyncActionType ||
     action.type === processUpdatesActionType ||
     action.type === newThreadActionTypes.success
   ) {
     const { newUpdates } = action.payload.updatesResult;
     if (newUpdates.length === 0) {
       return {
         threadStore: state,
         newThreadInconsistencies: [],
         threadStoreOperations: [],
       };
     }
     const threadStoreOperations = generateOpsForThreadUpdates(
       state.threadInfos,
       action.payload,
     );
     const updatedThreadStore = processThreadStoreOperations(
       state,
       threadStoreOperations,
     );
     return {
       threadStore: updatedThreadStore,
       newThreadInconsistencies: [],
       threadStoreOperations,
     };
   } else if (action.type === updateSubscriptionActionTypes.success) {
     const { threadID, subscription } = action.payload;
     const newThreadInfo = {
       ...state.threadInfos[threadID],
       currentUser: {
         ...state.threadInfos[threadID].currentUser,
         subscription,
       },
     };
     const threadStoreOperations = [
       {
         type: 'replace',
         payload: {
           id: threadID,
           threadInfo: newThreadInfo,
         },
       },
     ];
     const updatedThreadStore = processThreadStoreOperations(
       state,
       threadStoreOperations,
     );
     return {
       threadStore: updatedThreadStore,
       newThreadInconsistencies: [],
       threadStoreOperations,
     };
   } else if (action.type === saveMessagesActionType) {
     const threadIDToMostRecentTime = new Map();
     for (const messageInfo of action.payload.rawMessageInfos) {
       const current = threadIDToMostRecentTime.get(messageInfo.threadID);
       if (!current || current < messageInfo.time) {
         threadIDToMostRecentTime.set(messageInfo.threadID, messageInfo.time);
       }
     }
     const changedThreadInfos = {};
     for (const [threadID, mostRecentTime] of threadIDToMostRecentTime) {
       const threadInfo = state.threadInfos[threadID];
       if (
         !threadInfo ||
         threadInfo.currentUser.unread ||
         action.payload.updatesCurrentAsOf > mostRecentTime
       ) {
         continue;
       }
       changedThreadInfos[threadID] = {
         ...state.threadInfos[threadID],
         currentUser: {
           ...state.threadInfos[threadID].currentUser,
           unread: true,
         },
       };
     }
     if (Object.keys(changedThreadInfos).length !== 0) {
       const threadStoreOperations = Object.keys(changedThreadInfos).map(id => ({
         type: 'replace',
         payload: {
           id,
           threadInfo: changedThreadInfos[id],
         },
       }));
       const updatedThreadStore = processThreadStoreOperations(
         state,
         threadStoreOperations,
       );
       return {
         threadStore: updatedThreadStore,
         newThreadInconsistencies: [],
         threadStoreOperations,
       };
     }
   } else if (action.type === processServerRequestsActionType) {
     const checkStateRequest = action.payload.serverRequests.find(
       candidate => candidate.type === serverRequestTypes.CHECK_STATE,
     );
     if (!checkStateRequest || !checkStateRequest.stateChanges) {
       return {
         threadStore: state,
         newThreadInconsistencies: [],
         threadStoreOperations: [],
       };
     }
     const { rawThreadInfos, deleteThreadIDs } = checkStateRequest.stateChanges;
     if (!rawThreadInfos && !deleteThreadIDs) {
       return {
         threadStore: state,
         newThreadInconsistencies: [],
         threadStoreOperations: [],
       };
     }
 
     const threadStoreOperations: ThreadStoreOperation[] = [];
     if (rawThreadInfos) {
       for (const rawThreadInfo of rawThreadInfos) {
         threadStoreOperations.push({
           type: 'replace',
           payload: {
             id: rawThreadInfo.id,
             threadInfo: rawThreadInfo,
           },
         });
       }
     }
     if (deleteThreadIDs) {
       threadStoreOperations.push({
         type: 'remove',
         payload: {
           ids: deleteThreadIDs,
         },
       });
     }
 
     const updatedThreadStore = processThreadStoreOperations(
       state,
       threadStoreOperations,
     );
 
     const newThreadInconsistencies = findInconsistencies(
       action,
       state.threadInfos,
       updatedThreadStore.threadInfos,
     );
 
     return {
       threadStore: updatedThreadStore,
       newThreadInconsistencies,
       threadStoreOperations,
     };
   } else if (action.type === updateActivityActionTypes.success) {
     const updatedThreadInfos = {};
     for (const setToUnread of action.payload.result.unfocusedToUnread) {
       const threadInfo = state.threadInfos[setToUnread];
       if (threadInfo && !threadInfo.currentUser.unread) {
         updatedThreadInfos[setToUnread] = {
           ...threadInfo,
           currentUser: {
             ...threadInfo.currentUser,
             unread: true,
           },
         };
       }
     }
     if (Object.keys(updatedThreadInfos).length === 0) {
       return {
         threadStore: state,
         newThreadInconsistencies: [],
         threadStoreOperations: [],
       };
     }
     const threadStoreOperations = Object.keys(updatedThreadInfos).map(id => ({
       type: 'replace',
       payload: {
         id,
         threadInfo: updatedThreadInfos[id],
       },
     }));
     const updatedThreadStore = processThreadStoreOperations(
       state,
       threadStoreOperations,
     );
     return {
       threadStore: updatedThreadStore,
       newThreadInconsistencies: [],
       threadStoreOperations,
     };
   } else if (action.type === setThreadUnreadStatusActionTypes.started) {
     const { threadID, unread } = action.payload;
     const updatedThreadInfo = {
       ...state.threadInfos[threadID],
       currentUser: {
         ...state.threadInfos[threadID].currentUser,
         unread,
       },
     };
     const threadStoreOperations = [
       {
         type: 'replace',
         payload: {
           id: threadID,
           threadInfo: updatedThreadInfo,
         },
       },
     ];
     const updatedThreadStore = processThreadStoreOperations(
       state,
       threadStoreOperations,
     );
     return {
       threadStore: updatedThreadStore,
       newThreadInconsistencies: [],
       threadStoreOperations,
     };
   } else if (action.type === setThreadUnreadStatusActionTypes.success) {
     const { threadID, resetToUnread } = action.payload;
     const currentUser = state.threadInfos[threadID].currentUser;
 
     if (!resetToUnread || currentUser.unread) {
       return {
         threadStore: state,
         newThreadInconsistencies: [],
         threadStoreOperations: [],
       };
     }
 
     const updatedUser = {
       ...currentUser,
       unread: true,
     };
     const updatedThread = {
       ...state.threadInfos[threadID],
       currentUser: updatedUser,
     };
     const threadStoreOperations = [
       {
         type: 'replace',
         payload: {
           id: threadID,
           threadInfo: updatedThread,
         },
       },
     ];
     const updatedThreadStore = processThreadStoreOperations(
       state,
       threadStoreOperations,
     );
     return {
       threadStore: updatedThreadStore,
       newThreadInconsistencies: [],
       threadStoreOperations,
     };
   } else if (action.type === setClientDBStoreActionType) {
     return {
       threadStore: action.payload.threadStore ?? state,
       newThreadInconsistencies: [],
       threadStoreOperations: [],
     };
   }
   return {
     threadStore: state,
     newThreadInconsistencies: [],
     threadStoreOperations: [],
   };
 }
 
 function processThreadStoreOperations(
   threadStore: ThreadStore,
   threadStoreOperations: $ReadOnlyArray<ThreadStoreOperation>,
 ): ThreadStore {
   if (threadStoreOperations.length === 0) {
     return threadStore;
   }
   let processedThreads = { ...threadStore.threadInfos };
   for (const operation of threadStoreOperations) {
     if (operation.type === 'replace') {
       processedThreads[operation.payload.id] = operation.payload.threadInfo;
     } else if (operation.type === 'remove') {
       for (const id of operation.payload.ids) {
         delete processedThreads[id];
       }
     } else if (operation.type === 'remove_all') {
       processedThreads = {};
     }
   }
   return { ...threadStore, threadInfos: processedThreads };
 }
 
 export { reduceThreadInfos, processThreadStoreOperations };
diff --git a/lib/reducers/user-reducer.js b/lib/reducers/user-reducer.js
index ea5dd115e..dc5ecc155 100644
--- a/lib/reducers/user-reducer.js
+++ b/lib/reducers/user-reducer.js
@@ -1,262 +1,264 @@
 // @flow
 
 import _isEqual from 'lodash/fp/isEqual.js';
 import _keyBy from 'lodash/fp/keyBy.js';
 
 import { siweAuthActionTypes } from '../actions/siwe-actions.js';
 import {
   joinThreadActionTypes,
   newThreadActionTypes,
 } from '../actions/thread-actions.js';
 import {
   logOutActionTypes,
   deleteAccountActionTypes,
   logInActionTypes,
   registerActionTypes,
   setUserSettingsActionTypes,
   updateUserAvatarActionTypes,
 } from '../actions/user-actions.js';
 import type { BaseAction } from '../types/redux-types.js';
 import {
   type UserInconsistencyReportCreationRequest,
   reportTypes,
 } from '../types/report-types.js';
 import {
   serverRequestTypes,
   processServerRequestsActionType,
 } from '../types/request-types.js';
 import {
   fullStateSyncActionType,
   incrementalStateSyncActionType,
 } from '../types/socket-types.js';
 import { updateTypes } from '../types/update-types-enum.js';
 import { processUpdatesActionType } from '../types/update-types.js';
 import type {
   CurrentUserInfo,
   UserStore,
   UserInfos,
 } from '../types/user-types.js';
 import { actionLogger } from '../utils/action-logger.js';
 import { setNewSessionActionType } from '../utils/action-utils.js';
 import { getConfig } from '../utils/config.js';
+import { generateReportID } from '../utils/report-utils.js';
 import { sanitizeActionSecrets } from '../utils/sanitization.js';
 
 function reduceCurrentUserInfo(
   state: ?CurrentUserInfo,
   action: BaseAction,
 ): ?CurrentUserInfo {
   if (
     action.type === logInActionTypes.success ||
     action.type === siweAuthActionTypes.success ||
     action.type === registerActionTypes.success ||
     action.type === logOutActionTypes.success ||
     action.type === deleteAccountActionTypes.success
   ) {
     if (!_isEqual(action.payload.currentUserInfo)(state)) {
       return action.payload.currentUserInfo;
     }
   } else if (
     action.type === setNewSessionActionType &&
     action.payload.sessionChange.currentUserInfo
   ) {
     const { sessionChange } = action.payload;
     if (!_isEqual(sessionChange.currentUserInfo)(state)) {
       return sessionChange.currentUserInfo;
     }
   } else if (action.type === fullStateSyncActionType) {
     const { currentUserInfo } = action.payload;
     if (!_isEqual(currentUserInfo)(state)) {
       return currentUserInfo;
     }
   } else if (
     action.type === incrementalStateSyncActionType ||
     action.type === processUpdatesActionType
   ) {
     for (const update of action.payload.updatesResult.newUpdates) {
       if (
         update.type === updateTypes.UPDATE_CURRENT_USER &&
         !_isEqual(update.currentUserInfo)(state)
       ) {
         return update.currentUserInfo;
       }
     }
   } else if (action.type === processServerRequestsActionType) {
     const checkStateRequest = action.payload.serverRequests.find(
       candidate => candidate.type === serverRequestTypes.CHECK_STATE,
     );
     if (
       checkStateRequest &&
       checkStateRequest.stateChanges &&
       checkStateRequest.stateChanges.currentUserInfo &&
       !_isEqual(checkStateRequest.stateChanges.currentUserInfo)(state)
     ) {
       return checkStateRequest.stateChanges.currentUserInfo;
     }
   } else if (
     action.type === updateUserAvatarActionTypes.success &&
     state &&
     !state.anonymous
   ) {
     const { viewerUpdates } = action.payload.updates;
     for (const update of viewerUpdates) {
       if (
         update.type === updateTypes.UPDATE_CURRENT_USER &&
         !_isEqual(update.currentUserInfo.avatar)(state.avatar)
       ) {
         return {
           ...state,
           avatar: update.currentUserInfo.avatar,
         };
       }
     }
     return state;
   } else if (action.type === setUserSettingsActionTypes.success) {
     if (state?.settings) {
       return {
         ...state,
         settings: {
           ...state.settings,
           ...action.payload,
         },
       };
     }
   }
   return state;
 }
 
 function findInconsistencies(
   action: BaseAction,
   beforeStateCheck: UserInfos,
   afterStateCheck: UserInfos,
 ): UserInconsistencyReportCreationRequest[] {
   if (_isEqual(beforeStateCheck)(afterStateCheck)) {
     return [];
   }
   return [
     {
       type: reportTypes.USER_INCONSISTENCY,
       platformDetails: getConfig().platformDetails,
       action: sanitizeActionSecrets(action),
       beforeStateCheck,
       afterStateCheck,
       lastActions: actionLogger.interestingActionSummaries,
       time: Date.now(),
+      id: generateReportID(),
     },
   ];
 }
 
 function reduceUserInfos(state: UserStore, action: BaseAction): UserStore {
   if (
     action.type === joinThreadActionTypes.success ||
     action.type === newThreadActionTypes.success
   ) {
     const newUserInfos = _keyBy(userInfo => userInfo.id)(
       action.payload.userInfos,
     );
     const updated = { ...state.userInfos, ...newUserInfos };
     if (!_isEqual(state.userInfos)(updated)) {
       return {
         ...state,
         userInfos: updated,
       };
     }
   } else if (
     action.type === logOutActionTypes.success ||
     action.type === deleteAccountActionTypes.success ||
     (action.type === setNewSessionActionType &&
       action.payload.sessionChange.cookieInvalidated)
   ) {
     if (Object.keys(state.userInfos).length === 0) {
       return state;
     }
     return {
       userInfos: {},
       inconsistencyReports: state.inconsistencyReports,
     };
   } else if (
     action.type === logInActionTypes.success ||
     action.type === siweAuthActionTypes.success ||
     action.type === registerActionTypes.success ||
     action.type === fullStateSyncActionType
   ) {
     const newUserInfos = _keyBy(userInfo => userInfo.id)(
       action.payload.userInfos,
     );
     if (!_isEqual(state.userInfos)(newUserInfos)) {
       return {
         userInfos: newUserInfos,
         inconsistencyReports: state.inconsistencyReports,
       };
     }
   } else if (
     action.type === incrementalStateSyncActionType ||
     action.type === processUpdatesActionType
   ) {
     const newUserInfos = _keyBy(userInfo => userInfo.id)(
       action.payload.userInfos,
     );
     const updated = { ...state.userInfos, ...newUserInfos };
     for (const update of action.payload.updatesResult.newUpdates) {
       if (update.type === updateTypes.DELETE_ACCOUNT) {
         delete updated[update.deletedUserID];
       }
     }
     if (!_isEqual(state.userInfos)(updated)) {
       return {
         userInfos: updated,
         inconsistencyReports: state.inconsistencyReports,
       };
     }
   } else if (action.type === processServerRequestsActionType) {
     const checkStateRequest = action.payload.serverRequests.find(
       candidate => candidate.type === serverRequestTypes.CHECK_STATE,
     );
     if (!checkStateRequest || !checkStateRequest.stateChanges) {
       return state;
     }
     const { userInfos, deleteUserInfoIDs } = checkStateRequest.stateChanges;
     if (!userInfos && !deleteUserInfoIDs) {
       return state;
     }
 
     const newUserInfos = { ...state.userInfos };
     if (userInfos) {
       for (const userInfo of userInfos) {
         newUserInfos[userInfo.id] = userInfo;
       }
     }
     if (deleteUserInfoIDs) {
       for (const deleteUserInfoID of deleteUserInfoIDs) {
         delete newUserInfos[deleteUserInfoID];
       }
     }
 
     const newInconsistencies = findInconsistencies(
       action,
       state.userInfos,
       newUserInfos,
     );
     return {
       userInfos: newUserInfos,
       inconsistencyReports: [
         ...state.inconsistencyReports,
         ...newInconsistencies,
       ],
     };
   } else if (action.type === updateUserAvatarActionTypes.success) {
     const newUserInfos = _keyBy(userInfo => userInfo.id)(
       action.payload.updates.userInfos,
     );
     const updated = { ...state.userInfos, ...newUserInfos };
     return !_isEqual(state.userInfos)(updated)
       ? {
           ...state,
           userInfos: updated,
         }
       : state;
   }
 
   return state;
 }
 
 export { reduceCurrentUserInfo, reduceUserInfos };
diff --git a/lib/shared/report-utils.js b/lib/shared/report-utils.js
index 91aab00aa..41ed19da0 100644
--- a/lib/shared/report-utils.js
+++ b/lib/shared/report-utils.js
@@ -1,32 +1,41 @@
 // @flow
 
 import invariant from 'invariant';
 
 import {
   type ClientReportCreationRequest,
   reportTypes,
 } from '../types/report-types.js';
 import {
   type ClientInconsistencyResponse,
   serverRequestTypes,
 } from '../types/request-types.js';
+import { generateReportID } from '../utils/report-utils.js';
 
 function inconsistencyResponsesToReports(
   responses: $ReadOnlyArray<ClientInconsistencyResponse>,
 ): ClientReportCreationRequest[] {
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   return responses.map(response => {
     if (response.type === serverRequestTypes.THREAD_INCONSISTENCY) {
       const { type, ...rest } = response;
-      return { ...rest, type: reportTypes.THREAD_INCONSISTENCY };
+      return {
+        ...rest,
+        type: reportTypes.THREAD_INCONSISTENCY,
+        id: generateReportID(),
+      };
     } else if (response.type === serverRequestTypes.ENTRY_INCONSISTENCY) {
       const { type, ...rest } = response;
-      return { ...rest, type: reportTypes.ENTRY_INCONSISTENCY };
+      return {
+        ...rest,
+        type: reportTypes.ENTRY_INCONSISTENCY,
+        id: generateReportID(),
+      };
     } else {
       invariant(false, `unexpected serverRequestType ${response.type}`);
     }
   });
 }
 
 export { inconsistencyResponsesToReports };
diff --git a/lib/utils/report-utils.js b/lib/utils/report-utils.js
index 1f3245c34..7f68ff211 100644
--- a/lib/utils/report-utils.js
+++ b/lib/utils/report-utils.js
@@ -1,29 +1,34 @@
 // @flow
 
 import { useSelector } from './redux-utils.js';
+import { getUUID } from './uuid.js';
 import {
   type SupportedReports,
   type EnabledReports,
   type ClientReportCreationRequest,
   reportTypes,
 } from '../types/report-types.js';
 
 function useIsReportEnabled(reportType: SupportedReports): boolean {
   return useSelector(state => state.reportStore.enabledReports[reportType]);
 }
 
 function isReportEnabled(
   report: ClientReportCreationRequest,
   enabledReports: EnabledReports,
 ): boolean {
   return (
     (report.type === reportTypes.MEDIA_MISSION &&
       enabledReports.mediaReports) ||
     (report.type === reportTypes.ERROR && enabledReports.crashReports) ||
     ((report.type === reportTypes.ENTRY_INCONSISTENCY ||
       report.type === reportTypes.THREAD_INCONSISTENCY) &&
       enabledReports.inconsistencyReports)
   );
 }
 
-export { useIsReportEnabled, isReportEnabled };
+function generateReportID(): string {
+  return getUUID();
+}
+
+export { useIsReportEnabled, isReportEnabled, generateReportID };
diff --git a/native/crash.react.js b/native/crash.react.js
index 4d5527376..c45e47c7f 100644
--- a/native/crash.react.js
+++ b/native/crash.react.js
@@ -1,296 +1,300 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import Clipboard from '@react-native-clipboard/clipboard';
 import invariant from 'invariant';
 import _shuffle from 'lodash/fp/shuffle.js';
 import * as React from 'react';
 import {
   View,
   Text,
   Platform,
   StyleSheet,
   ScrollView,
   ActivityIndicator,
 } from 'react-native';
 
 import {
   sendReportActionTypes,
   sendReport,
 } from 'lib/actions/report-actions.js';
 import { logOutActionTypes, logOut } from 'lib/actions/user-actions.js';
 import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
 import type { LogOutResult } from 'lib/types/account-types.js';
 import {
   type ErrorData,
   type ClientReportCreationRequest,
   type ReportCreationResponse,
   reportTypes,
 } from 'lib/types/report-types.js';
 import type { PreRequestUserState } from 'lib/types/session-types.js';
 import { actionLogger } from 'lib/utils/action-logger.js';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
-import { useIsReportEnabled } from 'lib/utils/report-utils.js';
+import {
+  generateReportID,
+  useIsReportEnabled,
+} from 'lib/utils/report-utils.js';
 import {
   sanitizeReduxReport,
   type ReduxCrashReport,
 } from 'lib/utils/sanitization.js';
 import sleep from 'lib/utils/sleep.js';
 
 import Button from './components/button.react.js';
 import ConnectedStatusBar from './connected-status-bar.react.js';
 import { commCoreModule } from './native-modules.js';
 import { persistConfig, codeVersion } from './redux/persist.js';
 import { useSelector } from './redux/redux-utils.js';
 import { wipeAndExit } from './utils/crash-utils.js';
 
 const errorTitles = ['Oh no!!', 'Womp womp womp...'];
 
 type BaseProps = {
   +errorData: $ReadOnlyArray<ErrorData>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +preRequestUserState: PreRequestUserState,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +sendReport: (
     request: ClientReportCreationRequest,
   ) => Promise<ReportCreationResponse>,
   +logOut: (preRequestUserState: PreRequestUserState) => Promise<LogOutResult>,
   +crashReportingEnabled: boolean,
 };
 type State = {
   +errorReportID: ?string,
   +doneWaiting: boolean,
 };
 class Crash extends React.PureComponent<Props, State> {
   errorTitle = _shuffle(errorTitles)[0];
 
   constructor(props) {
     super(props);
     this.state = {
       errorReportID: null,
       doneWaiting: !props.crashReportingEnabled,
     };
   }
 
   componentDidMount() {
     if (this.state.doneWaiting) {
       return;
     }
     this.props.dispatchActionPromise(sendReportActionTypes, this.sendReport());
     this.timeOut();
   }
 
   async timeOut() {
     // If it takes more than 10s, give up and let the user exit
     await sleep(10000);
     this.setState({ doneWaiting: true });
   }
 
   render() {
     const errorText = [...this.props.errorData]
       .reverse()
       .map(errorData => errorData.error.message)
       .join('\n');
 
     let crashID;
     if (!this.state.doneWaiting) {
       crashID = <ActivityIndicator size="small" color="black" />;
     } else if (this.state.doneWaiting && this.state.errorReportID) {
       crashID = (
         <View style={styles.crashID}>
           <Text style={styles.crashIDText}>Crash report ID:</Text>
           <View style={styles.errorReportID}>
             <Text style={styles.errorReportIDText}>
               {this.state.errorReportID}
             </Text>
             <Button onPress={this.onCopyCrashReportID}>
               <Text style={styles.copyCrashReportIDButtonText}>(Copy)</Text>
             </Button>
           </View>
         </View>
       );
     } else {
       crashID = (
         <Text style={styles.text}>
           Crash reporting can be enabled in the Profile tab.
         </Text>
       );
     }
 
     const buttonStyle = { opacity: Number(this.state.doneWaiting) };
 
     return (
       <View style={styles.container}>
         <ConnectedStatusBar barStyle="dark-content" />
         <Icon name="bug" size={32} color="red" />
         <Text style={styles.header}>{this.errorTitle}</Text>
         <Text style={styles.text}>I&rsquo;m sorry, but the app crashed.</Text>
         {crashID}
         <Text style={styles.text}>
           Here&rsquo;s some text that&rsquo;s probably not helpful:
         </Text>
         <ScrollView style={styles.scrollView}>
           <Text style={styles.errorText}>{errorText}</Text>
         </ScrollView>
         <View style={[styles.buttons, buttonStyle]}>
           <Button onPress={this.onPressKill} style={styles.button}>
             <Text style={styles.buttonText}>Kill the app</Text>
           </Button>
           <Button onPress={this.onPressWipe} style={styles.button}>
             <Text style={styles.buttonText}>Wipe state and kill app</Text>
           </Button>
         </View>
       </View>
     );
   }
 
   async sendReport() {
     const sanitizedReduxReport: ReduxCrashReport = sanitizeReduxReport({
       preloadedState: actionLogger.preloadedState,
       currentState: actionLogger.currentState,
       actions: actionLogger.actions,
     });
     const result = await this.props.sendReport({
       type: reportTypes.ERROR,
       platformDetails: {
         platform: Platform.OS,
         codeVersion,
         stateVersion: persistConfig.version,
       },
       errors: this.props.errorData.map(data => ({
         errorMessage: data.error.message,
         stack: data.error.stack,
         componentStack: data.info && data.info.componentStack,
       })),
       ...sanitizedReduxReport,
+      id: generateReportID(),
     });
     this.setState({
       errorReportID: result.id,
       doneWaiting: true,
     });
   }
 
   onPressKill = () => {
     if (!this.state.doneWaiting) {
       return;
     }
     commCoreModule.terminate();
   };
 
   onPressWipe = async () => {
     if (!this.state.doneWaiting) {
       return;
     }
     this.props.dispatchActionPromise(logOutActionTypes, this.logOutAndExit());
   };
 
   async logOutAndExit() {
     try {
       await this.props.logOut(this.props.preRequestUserState);
     } catch (e) {}
     await wipeAndExit();
   }
 
   onCopyCrashReportID = () => {
     invariant(this.state.errorReportID, 'should be set');
     Clipboard.setString(this.state.errorReportID);
   };
 }
 
 const styles = StyleSheet.create({
   button: {
     backgroundColor: '#FF0000',
     borderRadius: 5,
     marginHorizontal: 10,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
   buttonText: {
     color: 'white',
     fontSize: 16,
   },
   buttons: {
     flexDirection: 'row',
   },
   container: {
     alignItems: 'center',
     backgroundColor: 'white',
     flex: 1,
     justifyContent: 'center',
   },
   copyCrashReportIDButtonText: {
     color: '#036AFF',
   },
   crashID: {
     flexDirection: 'row',
     paddingBottom: 12,
     paddingTop: 2,
   },
   crashIDText: {
     color: 'black',
     paddingRight: 8,
   },
   errorReportID: {
     flexDirection: 'row',
     height: 20,
   },
   errorReportIDText: {
     color: 'black',
     paddingRight: 8,
   },
   errorText: {
     color: 'black',
     fontFamily: Platform.select({
       ios: 'Menlo',
       default: 'monospace',
     }),
   },
   header: {
     color: 'black',
     fontSize: 24,
     paddingBottom: 24,
   },
   scrollView: {
     flex: 1,
     marginBottom: 24,
     marginTop: 12,
     maxHeight: 200,
     paddingHorizontal: 50,
   },
   text: {
     color: 'black',
     paddingBottom: 12,
   },
 });
 
 const ConnectedCrash: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedCrash(props: BaseProps) {
     const preRequestUserState = useSelector(preRequestUserStateSelector);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callSendReport = useServerCall(sendReport);
     const callLogOut = useServerCall(logOut);
     const crashReportingEnabled = useIsReportEnabled('crashReports');
     return (
       <Crash
         {...props}
         preRequestUserState={preRequestUserState}
         dispatchActionPromise={dispatchActionPromise}
         sendReport={callSendReport}
         logOut={callLogOut}
         crashReportingEnabled={crashReportingEnabled}
       />
     );
   },
 );
 
 export default ConnectedCrash;
diff --git a/native/input/input-state-container.react.js b/native/input/input-state-container.react.js
index 8bec59ca8..5fc5a4c0c 100644
--- a/native/input/input-state-container.react.js
+++ b/native/input/input-state-container.react.js
@@ -1,1852 +1,1856 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform } from 'react-native';
 import * as Upload from 'react-native-background-upload';
 import { useDispatch } from 'react-redux';
 import { createSelector } from 'reselect';
 import * as uuid from 'uuid';
 
 import {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   sendMultimediaMessage,
   sendTextMessageActionTypes,
   sendTextMessage,
 } from 'lib/actions/message-actions.js';
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
 import { newThread } from 'lib/actions/thread-actions.js';
 import {
   uploadMultimedia,
   uploadMediaMetadata,
   updateMultimediaMessageMediaActionType,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
 } from 'lib/actions/upload-actions.js';
 import blobService from 'lib/facts/blob-service.js';
 import commStaffCommunity from 'lib/facts/comm-staff-community.js';
 import { pathFromURI, replaceExtension } from 'lib/media/file-utils.js';
 import {
   isLocalUploadID,
   getNextLocalUploadID,
 } from 'lib/media/media-utils.js';
 import { videoDurationLimit } from 'lib/media/video-utils.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import {
   createMediaMessageInfo,
   localIDPrefix,
   useMessageCreationSideEffectsFunc,
 } from 'lib/shared/message-utils.js';
 import type { CreationSideEffectsFunc } from 'lib/shared/messages/message-spec.js';
 import {
   createRealThreadFromPendingThread,
   threadIsPending,
   threadIsPendingSidebar,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   Dimensions,
   UploadMultimediaResult,
   Media,
   NativeMediaSelection,
   MediaMissionResult,
   MediaMission,
   UploadMediaMetadataRequest,
 } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import {
   type RawMessageInfo,
   type RawMultimediaMessageInfo,
   type SendMessageResult,
   type SendMessagePayload,
   type MessageInfo,
 } from 'lib/types/message-types.js';
 import type { RawImagesMessageInfo } from 'lib/types/messages/images.js';
 import type {
   MediaMessageServerDBContent,
   RawMediaMessageInfo,
 } from 'lib/types/messages/media.js';
 import { getMediaMessageServerDBContentsFromMedia } from 'lib/types/messages/media.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import {
   type MediaMissionReportCreationRequest,
   reportTypes,
 } from 'lib/types/report-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import {
   type ClientNewThreadRequest,
   type NewThreadResult,
   type ThreadInfo,
 } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { toBase64URL } from 'lib/utils/base64.js';
 import { makeBlobServiceEndpointURL } from 'lib/utils/blob-service.js';
 import type {
   CallServerEndpointOptions,
   CallServerEndpointResponse,
 } from 'lib/utils/call-server-endpoint.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException, cloneError } from 'lib/utils/errors.js';
 import { values } from 'lib/utils/objects.js';
-import { useIsReportEnabled } from 'lib/utils/report-utils.js';
+import {
+  generateReportID,
+  useIsReportEnabled,
+} from 'lib/utils/report-utils.js';
 
 import {
   type EditInputBarMessageParameters,
   type EditState,
   InputStateContext,
   type PendingMultimediaUploads,
   type MultimediaProcessingStep,
 } from './input-state.js';
 import { encryptMedia } from '../media/encryption-utils.js';
 import { disposeTempFile } from '../media/file-utils.js';
 import { processMedia } from '../media/media-utils.js';
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 type MediaIDs =
   | { +type: 'photo', +localMediaID: string }
   | { +type: 'video', +localMediaID: string, +localThumbnailID: string };
 type UploadFileInput = {
   +selection: NativeMediaSelection,
   +ids: MediaIDs,
 };
 type CompletedUploads = { +[localMessageID: string]: ?Set<string> };
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +nextLocalID: number,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +ongoingMessageCreation: boolean,
   +hasWiFi: boolean,
   +mediaReportsEnabled: boolean,
   +calendarQuery: () => CalendarQuery,
   +dispatch: Dispatch,
   +staffCanSee: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +uploadMediaMetadata: (
     input: UploadMediaMetadataRequest,
   ) => Promise<UploadMultimediaResult>,
   +sendMultimediaMessage: (
     threadID: string,
     localID: string,
     mediaMessageContents: $ReadOnlyArray<MediaMessageServerDBContent>,
     sidebarCreation?: boolean,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (
     threadID: string,
     localID: string,
     text: string,
     sidebarCreation?: boolean,
   ) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
   +textMessageCreationSideEffectsFunc: CreationSideEffectsFunc<RawTextMessageInfo>,
 };
 type State = {
   +pendingUploads: PendingMultimediaUploads,
   +editState: EditState,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
     editState: {
       editedMessage: null,
     },
   };
   sendCallbacks: Array<() => void> = [];
   activeURIs = new Map();
   editInputBarCallbacks: Array<
     (params: EditInputBarMessageParameters) => void,
   > = [];
   scrollToMessageCallbacks: Array<(messageID: string) => void> = [];
   pendingThreadCreations = new Map<string, Promise<string>>();
   pendingThreadUpdateHandlers = new Map<string, (ThreadInfo) => mixed>();
   // TODO: flip the switch
   // Note that this enables Blob service for encrypted media only
   useBlobServiceUploads = false;
 
   // When the user sends a multimedia message that triggers the creation of a
   // sidebar, the sidebar gets created right away, but the message needs to wait
   // for the uploads to complete before sending. We use this Set to track the
   // message localIDs that need sidebarCreation: true.
   pendingSidebarCreationMessageLocalIDs = new Set<string>();
 
   static getCompletedUploads(props: Props, state: State): CompletedUploads {
     const completedUploads = {};
     for (const localMessageID in state.pendingUploads) {
       const messagePendingUploads = state.pendingUploads[localMessageID];
       const rawMessageInfo = props.messageStoreMessages[localMessageID];
       if (!rawMessageInfo) {
         continue;
       }
       invariant(
         rawMessageInfo.type === messageTypes.IMAGES ||
           rawMessageInfo.type === messageTypes.MULTIMEDIA,
         `rawMessageInfo ${localMessageID} should be multimedia`,
       );
 
       let allUploadsComplete = true;
       const completedUploadIDs = new Set(Object.keys(messagePendingUploads));
       for (const singleMedia of rawMessageInfo.media) {
         if (isLocalUploadID(singleMedia.id)) {
           allUploadsComplete = false;
           completedUploadIDs.delete(singleMedia.id);
         }
       }
 
       if (allUploadsComplete) {
         completedUploads[localMessageID] = null;
       } else if (completedUploadIDs.size > 0) {
         completedUploads[localMessageID] = completedUploadIDs;
       }
     }
     return completedUploads;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const currentlyComplete = InputStateContainer.getCompletedUploads(
       this.props,
       this.state,
     );
     const previouslyComplete = InputStateContainer.getCompletedUploads(
       prevProps,
       prevState,
     );
 
     const newPendingUploads = {};
     let pendingUploadsChanged = false;
     const readyMessageIDs = [];
     for (const localMessageID in this.state.pendingUploads) {
       const messagePendingUploads = this.state.pendingUploads[localMessageID];
       const prevRawMessageInfo = prevProps.messageStoreMessages[localMessageID];
       const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
       const completedUploadIDs = currentlyComplete[localMessageID];
       const previouslyCompletedUploadIDs = previouslyComplete[localMessageID];
 
       if (!rawMessageInfo && prevRawMessageInfo) {
         pendingUploadsChanged = true;
         continue;
       } else if (completedUploadIDs === null) {
         // All of this message's uploads have been completed
         newPendingUploads[localMessageID] = {};
         if (previouslyCompletedUploadIDs !== null) {
           readyMessageIDs.push(localMessageID);
           pendingUploadsChanged = true;
         }
         continue;
       } else if (!completedUploadIDs) {
         // Nothing has been completed
         newPendingUploads[localMessageID] = messagePendingUploads;
         continue;
       }
 
       const newUploads = {};
       let uploadsChanged = false;
       for (const localUploadID in messagePendingUploads) {
         if (!completedUploadIDs.has(localUploadID)) {
           newUploads[localUploadID] = messagePendingUploads[localUploadID];
         } else if (
           !previouslyCompletedUploadIDs ||
           !previouslyCompletedUploadIDs.has(localUploadID)
         ) {
           uploadsChanged = true;
         }
       }
 
       if (uploadsChanged) {
         pendingUploadsChanged = true;
         newPendingUploads[localMessageID] = newUploads;
       } else {
         newPendingUploads[localMessageID] = messagePendingUploads;
       }
     }
     if (pendingUploadsChanged) {
       this.setState({ pendingUploads: newPendingUploads });
     }
 
     for (const localMessageID of readyMessageIDs) {
       const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
       if (!rawMessageInfo) {
         continue;
       }
       invariant(
         rawMessageInfo.type === messageTypes.IMAGES ||
           rawMessageInfo.type === messageTypes.MULTIMEDIA,
         `rawMessageInfo ${localMessageID} should be multimedia`,
       );
       this.dispatchMultimediaMessageAction(rawMessageInfo);
     }
   }
 
   async dispatchMultimediaMessageAction(messageInfo: RawMultimediaMessageInfo) {
     if (!threadIsPending(messageInfo.threadID)) {
       this.props.dispatchActionPromise(
         sendMultimediaMessageActionTypes,
         this.sendMultimediaMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       const threadCreationPromise = this.pendingThreadCreations.get(
         messageInfo.threadID,
       );
       if (!threadCreationPromise) {
         // When we create or retry multimedia message, we add a promise to
         // pendingThreadCreations map. This promise can be removed in
         // sendMultimediaMessage and sendTextMessage methods. When any of these
         // method remove the promise, it has to be settled. If the promise was
         // fulfilled, this method would be called with realized thread, so we
         // can conclude that the promise was rejected. We don't have enough info
         // here to retry the thread creation, but we can mark the message as
         // failed. Then the retry will be possible and promise will be created
         // again.
         throw new Error('Thread creation failed');
       }
       newThreadID = await threadCreationPromise;
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendMultimediaMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(messageInfo.threadID);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
       this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<SendMessagePayload> {
     const { localID, threadID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     const sidebarCreation =
       this.pendingSidebarCreationMessageLocalIDs.has(localID);
     const mediaMessageContents = getMediaMessageServerDBContentsFromMedia(
       messageInfo.media,
     );
     try {
       const result = await this.props.sendMultimediaMessage(
         threadID,
         localID,
         mediaMessageContents,
         sidebarCreation,
       );
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       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;
     }
   }
 
   inputStateSelector = createSelector(
     (state: State) => state.pendingUploads,
     (state: State) => state.editState,
     (pendingUploads: PendingMultimediaUploads, editState: EditState) => ({
       pendingUploads,
       sendTextMessage: this.sendTextMessage,
       sendMultimediaMessage: this.sendMultimediaMessage,
       editInputMessage: this.editInputMessage,
       addEditInputMessageListener: this.addEditInputMessageListener,
       removeEditInputMessageListener: this.removeEditInputMessageListener,
       messageHasUploadFailure: this.messageHasUploadFailure,
       retryMessage: this.retryMessage,
       registerSendCallback: this.registerSendCallback,
       unregisterSendCallback: this.unregisterSendCallback,
       uploadInProgress: this.uploadInProgress,
       reportURIDisplayed: this.reportURIDisplayed,
       setPendingThreadUpdateHandler: this.setPendingThreadUpdateHandler,
       editState,
       setEditedMessage: this.setEditedMessage,
       scrollToMessage: this.scrollToMessage,
       addScrollToMessageListener: this.addScrollToMessageListener,
       removeScrollToMessageListener: this.removeScrollToMessageListener,
     }),
   );
 
   scrollToMessage = (messageID: string) => {
     this.scrollToMessageCallbacks.forEach(callback => callback(messageID));
   };
 
   addScrollToMessageListener = (callback: (messageID: string) => void) => {
     this.scrollToMessageCallbacks.push(callback);
   };
 
   removeScrollToMessageListener = (
     callbackScrollToMessage: (messageID: string) => void,
   ) => {
     this.scrollToMessageCallbacks = this.scrollToMessageCallbacks.filter(
       candidate => candidate !== callbackScrollToMessage,
     );
   };
 
   uploadInProgress = () => {
     if (this.props.ongoingMessageCreation) {
       return true;
     }
     const { pendingUploads } = this.state;
     return values(pendingUploads).some(messagePendingUploads =>
       values(messagePendingUploads).some(upload => !upload.failed),
     );
   };
 
   sendTextMessage = async (
     messageInfo: RawTextMessageInfo,
     inputThreadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
 
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     if (threadIsPendingSidebar(inputThreadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localID);
     }
 
     if (!threadIsPending(inputThreadInfo.id)) {
       this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(
           messageInfo,
           inputThreadInfo,
           parentThreadInfo,
         ),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let threadInfo = inputThreadInfo;
     const { viewerID } = this.props;
     if (viewerID && inputThreadInfo.type === threadTypes.SIDEBAR) {
       invariant(parentThreadInfo, 'sidebar should have parent');
       threadInfo = patchThreadInfoToIncludeMentionedMembersOfParent(
         inputThreadInfo,
         parentThreadInfo,
         messageInfo.text,
         viewerID,
       );
       if (threadInfo !== inputThreadInfo) {
         const pendingThreadUpdateHandler = this.pendingThreadUpdateHandlers.get(
           threadInfo.id,
         );
         pendingThreadUpdateHandler?.(threadInfo);
       }
     }
 
     let newThreadID = null;
     try {
       newThreadID = await this.startThreadCreation(threadInfo);
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendTextMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(threadInfo.id);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     const newThreadInfo = {
       ...threadInfo,
       id: newThreadID,
     };
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(
         newMessageInfo,
         newThreadInfo,
         parentThreadInfo,
       ),
       undefined,
       newMessageInfo,
     );
   };
 
   startThreadCreation(threadInfo: ThreadInfo): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return Promise.resolve(threadInfo.id);
     }
     let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
     if (!threadCreationPromise) {
       const calendarQuery = this.props.calendarQuery();
       threadCreationPromise = createRealThreadFromPendingThread({
         threadInfo,
         dispatchActionPromise: this.props.dispatchActionPromise,
         createNewThread: this.props.newThread,
         sourceMessageID: threadInfo.sourceMessageID,
         viewerID: this.props.viewerID,
         calendarQuery,
       });
       this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
     }
     return threadCreationPromise;
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ): Promise<SendMessagePayload> {
     try {
       await this.props.textMessageCreationSideEffectsFunc(
         messageInfo,
         threadInfo,
         parentThreadInfo,
       );
       const { localID } = messageInfo;
       invariant(
         localID !== null && localID !== undefined,
         'localID should be set',
       );
       const sidebarCreation =
         this.pendingSidebarCreationMessageLocalIDs.has(localID);
       const result = await this.props.sendTextMessage(
         messageInfo.threadID,
         localID,
         messageInfo.text,
         sidebarCreation,
       );
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       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;
     }
   }
 
   shouldEncryptMedia(threadInfo: ThreadInfo): boolean {
     return threadInfoInsideCommunity(threadInfo, commStaffCommunity.id);
   }
 
   sendMultimediaMessage = async (
     selections: $ReadOnlyArray<NativeMediaSelection>,
     threadInfo: ThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
     const localMessageID = `${localIDPrefix}${this.props.nextLocalID}`;
     this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const uploadFileInputs = [],
       media = [];
     for (const selection of selections) {
       const localMediaID = getNextLocalUploadID();
       let ids;
       if (
         selection.step === 'photo_library' ||
         selection.step === 'photo_capture' ||
         selection.step === 'photo_paste'
       ) {
         media.push({
           id: localMediaID,
           uri: selection.uri,
           type: 'photo',
           dimensions: selection.dimensions,
           localMediaSelection: selection,
           thumbHash: null,
         });
         ids = { type: 'photo', localMediaID };
       }
       const localThumbnailID = getNextLocalUploadID();
       if (selection.step === 'video_library') {
         media.push({
           id: localMediaID,
           uri: selection.uri,
           type: 'video',
           dimensions: selection.dimensions,
           localMediaSelection: selection,
           loop: false,
           thumbnailID: localThumbnailID,
           thumbnailURI: selection.uri,
           thumbnailThumbHash: null,
         });
         ids = { type: 'video', localMediaID, localThumbnailID };
       }
       invariant(ids, `unexpected MediaSelection ${selection.step}`);
       uploadFileInputs.push({ selection, ids });
     }
 
     const pendingUploads = {};
     for (const uploadFileInput of uploadFileInputs) {
       const { localMediaID } = uploadFileInput.ids;
       pendingUploads[localMediaID] = {
         failed: false,
         progressPercent: 0,
         processingStep: null,
       };
       if (uploadFileInput.ids.type === 'video') {
         const { localThumbnailID } = uploadFileInput.ids;
         pendingUploads[localThumbnailID] = {
           failed: false,
           progressPercent: 0,
           processingStep: null,
         };
       }
     }
 
     this.setState(
       prevState => {
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [localMessageID]: pendingUploads,
           },
         };
       },
       () => {
         const creatorID = this.props.viewerID;
         invariant(creatorID, 'need viewer ID in order to send a message');
         const messageInfo = createMediaMessageInfo(
           {
             localID: localMessageID,
             threadID: threadInfo.id,
             creatorID,
             media,
           },
           { forceMultimediaMessageType: this.shouldEncryptMedia(threadInfo) },
         );
         this.props.dispatch({
           type: createLocalMessageActionType,
           payload: messageInfo,
         });
       },
     );
 
     await this.uploadFiles(localMessageID, uploadFileInputs, threadInfo);
   };
 
   async uploadFiles(
     localMessageID: string,
     uploadFileInputs: $ReadOnlyArray<UploadFileInput>,
     threadInfo: ThreadInfo,
   ) {
     const results = await Promise.all(
       uploadFileInputs.map(uploadFileInput =>
         this.uploadFile(localMessageID, uploadFileInput, threadInfo),
       ),
     );
     const errors = [...new Set(results.filter(Boolean))];
     if (errors.length > 0) {
       displayActionResultModal(errors.join(', ') + ' :(');
     }
   }
 
   async uploadFile(
     localMessageID: string,
     uploadFileInput: UploadFileInput,
     threadInfo: ThreadInfo,
   ): Promise<?string> {
     const { ids, selection } = uploadFileInput;
     const { localMediaID } = ids;
     const start = selection.sendTime;
     const steps = [selection];
     let serverID;
     let userTime;
     let errorMessage;
     let reportPromise;
     const filesToDispose = [];
 
     const onUploadFinished = async (result: MediaMissionResult) => {
       if (!this.props.mediaReportsEnabled) {
         return errorMessage;
       }
       if (reportPromise) {
         const finalSteps = await reportPromise;
         steps.push(...finalSteps);
       }
       const totalTime = Date.now() - start;
       userTime = userTime ? userTime : totalTime;
       this.queueMediaMissionReport(
         { localID: localMediaID, localMessageID, serverID },
         { steps, result, totalTime, userTime },
       );
       return errorMessage;
     };
     const onUploadFailed = (mediaID: string, message: string) => {
       errorMessage = message;
       this.handleUploadFailure(localMessageID, mediaID);
       userTime = Date.now() - start;
     };
 
     const onTranscodingProgress = (percent: number) => {
       this.setProgress(localMessageID, localMediaID, 'transcoding', percent);
     };
 
     let processedMedia;
     const processingStart = Date.now();
     try {
       const processMediaReturn = processMedia(selection, {
         hasWiFi: this.props.hasWiFi,
         finalFileHeaderCheck: this.props.staffCanSee,
         onTranscodingProgress,
       });
       reportPromise = processMediaReturn.reportPromise;
       const processResult = await processMediaReturn.resultPromise;
       if (!processResult.success) {
         const message =
           processResult.reason === 'video_too_long'
             ? `can't do vids longer than ${videoDurationLimit}min`
             : 'processing failed';
         onUploadFailed(localMediaID, message);
         return await onUploadFinished(processResult);
       }
       if (processResult.shouldDisposePath) {
         filesToDispose.push(processResult.shouldDisposePath);
       }
       processedMedia = processResult;
     } catch (e) {
       onUploadFailed(localMediaID, 'processing failed');
       return await onUploadFinished({
         success: false,
         reason: 'processing_exception',
         time: Date.now() - processingStart,
         exceptionMessage: getMessageForException(e),
       });
     }
 
     let encryptionSteps = [];
     if (this.shouldEncryptMedia(threadInfo)) {
       const encryptionStart = Date.now();
       try {
         const { result: encryptionResult, ...encryptionReturn } =
           await encryptMedia(processedMedia);
         encryptionSteps = encryptionReturn.steps;
         if (!encryptionResult.success) {
           onUploadFailed(localMediaID, encryptionResult.reason);
           return await onUploadFinished(encryptionResult);
         }
         if (encryptionResult.shouldDisposePath) {
           filesToDispose.push(encryptionResult.shouldDisposePath);
         }
         processedMedia = encryptionResult;
       } catch (e) {
         onUploadFailed(localMediaID, 'encryption failed');
         return await onUploadFinished({
           success: false,
           reason: 'encryption_exception',
           time: Date.now() - encryptionStart,
           exceptionMessage: getMessageForException(e),
         });
       }
     }
 
     const { uploadURI, filename, mime } = processedMedia;
 
     const { hasWiFi } = this.props;
 
     const uploadStart = Date.now();
     let uploadExceptionMessage,
       uploadResult,
       uploadThumbnailResult,
       mediaMissionResult;
     try {
       const uploadPromises = [];
       if (
         this.useBlobServiceUploads &&
         (processedMedia.mediaType === 'encrypted_photo' ||
           processedMedia.mediaType === 'encrypted_video')
       ) {
         uploadPromises.push(
           this.blobServiceUpload(
             {
               uri: uploadURI,
               filename: filename,
               mimeType: mime,
               blobHash: processedMedia.blobHash,
               encryptionKey: processedMedia.encryptionKey,
               dimensions: processedMedia.dimensions,
               thumbHash:
                 processedMedia.mediaType === 'encrypted_photo'
                   ? processedMedia.thumbHash
                   : null,
             },
             {
               onProgress: (percent: number) => {
                 this.setProgress(
                   localMessageID,
                   localMediaID,
                   'uploading',
                   percent,
                 );
               },
             },
           ),
         );
 
         if (processedMedia.mediaType === 'encrypted_video') {
           uploadPromises.push(
             this.blobServiceUpload({
               uri: processedMedia.uploadThumbnailURI,
               filename: replaceExtension(`thumb${filename}`, 'jpg'),
               mimeType: 'image/jpeg',
               blobHash: processedMedia.thumbnailBlobHash,
               encryptionKey: processedMedia.thumbnailEncryptionKey,
               loop: false,
               dimensions: processedMedia.dimensions,
               thumbHash: processedMedia.thumbHash,
             }),
           );
         }
         [uploadResult, uploadThumbnailResult] = await Promise.all(
           uploadPromises,
         );
       } else {
         uploadPromises.push(
           this.props.uploadMultimedia(
             { uri: uploadURI, name: filename, type: mime },
             {
               ...processedMedia.dimensions,
               loop:
                 processedMedia.mediaType === 'video' ||
                 processedMedia.mediaType === 'encrypted_video'
                   ? processedMedia.loop
                   : undefined,
               encryptionKey: processedMedia.encryptionKey,
               thumbHash:
                 processedMedia.mediaType === 'photo' ||
                 processedMedia.mediaType === 'encrypted_photo'
                   ? processedMedia.thumbHash
                   : null,
             },
             {
               onProgress: (percent: number) =>
                 this.setProgress(
                   localMessageID,
                   localMediaID,
                   'uploading',
                   percent,
                 ),
               uploadBlob: this.uploadBlob,
             },
           ),
         );
 
         if (
           processedMedia.mediaType === 'video' ||
           processedMedia.mediaType === 'encrypted_video'
         ) {
           uploadPromises.push(
             this.props.uploadMultimedia(
               {
                 uri: processedMedia.uploadThumbnailURI,
                 name: replaceExtension(`thumb${filename}`, 'jpg'),
                 type: 'image/jpeg',
               },
               {
                 ...processedMedia.dimensions,
                 loop: false,
                 encryptionKey: processedMedia.thumbnailEncryptionKey,
                 thumbHash: processedMedia.thumbHash,
               },
               {
                 uploadBlob: this.uploadBlob,
               },
             ),
           );
         }
         [uploadResult, uploadThumbnailResult] = await Promise.all(
           uploadPromises,
         );
       }
       mediaMissionResult = { success: true };
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       onUploadFailed(localMediaID, 'upload failed');
       mediaMissionResult = {
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       };
     }
 
     if (
       ((processedMedia.mediaType === 'photo' ||
         processedMedia.mediaType === 'encrypted_photo') &&
         uploadResult) ||
       ((processedMedia.mediaType === 'video' ||
         processedMedia.mediaType === 'encrypted_video') &&
         uploadResult &&
         uploadThumbnailResult)
     ) {
       const { encryptionKey } = processedMedia;
       const { id, uri, dimensions, loop } = uploadResult;
       serverID = id;
 
       const mediaSourcePayload =
         processedMedia.mediaType === 'encrypted_photo' ||
         processedMedia.mediaType === 'encrypted_video'
           ? {
               type: processedMedia.mediaType,
               holder: uri,
               encryptionKey,
             }
           : {
               type: uploadResult.mediaType,
               uri,
             };
       let updateMediaPayload = {
         messageID: localMessageID,
         currentMediaID: localMediaID,
         mediaUpdate: {
           id,
           ...mediaSourcePayload,
           dimensions,
           localMediaSelection: undefined,
           loop: uploadResult.mediaType === 'video' ? loop : undefined,
         },
       };
 
       if (
         processedMedia.mediaType === 'video' ||
         processedMedia.mediaType === 'encrypted_video'
       ) {
         invariant(uploadThumbnailResult, 'uploadThumbnailResult exists');
         const { uri: thumbnailURI, id: thumbnailID } = uploadThumbnailResult;
         const { thumbnailEncryptionKey, thumbHash: thumbnailThumbHash } =
           processedMedia;
 
         if (processedMedia.mediaType === 'encrypted_video') {
           updateMediaPayload = {
             ...updateMediaPayload,
             mediaUpdate: {
               ...updateMediaPayload.mediaUpdate,
               thumbnailID,
               thumbnailHolder: thumbnailURI,
               thumbnailEncryptionKey,
               thumbnailThumbHash,
             },
           };
         } else {
           updateMediaPayload = {
             ...updateMediaPayload,
             mediaUpdate: {
               ...updateMediaPayload.mediaUpdate,
               thumbnailID,
               thumbnailURI,
               thumbnailThumbHash,
             },
           };
         }
       } else {
         updateMediaPayload = {
           ...updateMediaPayload,
           mediaUpdate: {
             ...updateMediaPayload.mediaUpdate,
             thumbHash: processedMedia.thumbHash,
           },
         };
       }
 
       // When we dispatch this action, it updates Redux and triggers the
       // componentDidUpdate in this class. componentDidUpdate will handle
       // calling dispatchMultimediaMessageAction once all the uploads are
       // complete, and does not wait until this function concludes.
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: updateMediaPayload,
       });
       userTime = Date.now() - start;
     }
 
     const processSteps = await reportPromise;
     reportPromise = null;
     steps.push(...processSteps);
     steps.push(...encryptionSteps);
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: filename,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
       hasWiFi,
     });
 
     const cleanupPromises = [];
 
     if (filesToDispose.length > 0) {
       // If processMedia needed to do any transcoding before upload, we dispose
       // of the resultant temporary file here. Since the transcoded temporary
       // file is only used for upload, we can dispose of it after processMedia
       // (reportPromise) and the upload are complete
       filesToDispose.forEach(shouldDisposePath => {
         cleanupPromises.push(
           (async () => {
             const disposeStep = await disposeTempFile(shouldDisposePath);
             steps.push(disposeStep);
           })(),
         );
       });
     }
 
     // if there's a thumbnail we'll temporarily unlink it here
     // instead of in media-utils, will be changed in later diffs
     if (processedMedia.mediaType === 'video') {
       const { uploadThumbnailURI } = processedMedia;
       cleanupPromises.push(
         (async () => {
           const { steps: clearSteps, result: thumbnailPath } =
             await this.waitForCaptureURIUnload(uploadThumbnailURI);
           steps.push(...clearSteps);
           if (!thumbnailPath) {
             return;
           }
           const disposeStep = await disposeTempFile(thumbnailPath);
           steps.push(disposeStep);
         })(),
       );
     }
 
     if (selection.captureTime || selection.step === 'photo_paste') {
       // If we are uploading a newly captured photo, we dispose of the original
       // file here. Note that we try to save photo captures to the camera roll
       // if we have permission. Even if we fail, this temporary file isn't
       // visible to the user, so there's no point in keeping it around. Since
       // the initial URI is used in rendering paths, we have to wait for it to
       // be replaced with the remote URI before we can dispose. Check out the
       // Multimedia component to see how the URIs get switched out.
       const captureURI = selection.uri;
       cleanupPromises.push(
         (async () => {
           const { steps: clearSteps, result: capturePath } =
             await this.waitForCaptureURIUnload(captureURI);
           steps.push(...clearSteps);
           if (!capturePath) {
             return;
           }
           const disposeStep = await disposeTempFile(capturePath);
           steps.push(disposeStep);
         })(),
       );
     }
 
     await Promise.all(cleanupPromises);
 
     return await onUploadFinished(mediaMissionResult);
   }
 
   setProgress(
     localMessageID: string,
     localUploadID: string,
     processingStep: MultimediaProcessingStep,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const pendingUploads = prevState.pendingUploads[localMessageID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newOutOfHundred = Math.floor(progressPercent * 100);
       const oldOutOfHundred = Math.floor(pendingUpload.progressPercent * 100);
       if (newOutOfHundred === oldOutOfHundred) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
           processingStep,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: newPendingUploads,
         },
       };
     });
   }
 
   async blobServiceUpload(
     input: {
       +uri: string,
       +filename: string,
       +mimeType: string,
       +blobHash: string,
       +encryptionKey: string,
       +dimensions: Dimensions,
       +loop?: boolean,
       +thumbHash: ?string,
     },
     options?: ?CallServerEndpointOptions,
   ): Promise<void> {
     const newHolder = uuid.v4();
     const blobHash = toBase64URL(input.blobHash);
 
     // 1. Assign new holder for blob with given blobHash
     let blobAlreadyExists: boolean;
     try {
       const assignHolderEndpoint = blobService.httpEndpoints.ASSIGN_HOLDER;
       const assignHolderResponse = await fetch(
         makeBlobServiceEndpointURL(assignHolderEndpoint),
         {
           method: assignHolderEndpoint.method,
           body: JSON.stringify({
             holder: newHolder,
             blob_hash: blobHash,
           }),
           headers: {
             'content-type': 'application/json',
           },
         },
       );
 
       if (!assignHolderResponse.ok) {
         const { status, statusText } = assignHolderResponse;
         throw new Error(`Server responded with HTTP ${status}: ${statusText}`);
       }
       const { data_exists: dataExistsResponse } =
         await assignHolderResponse.json();
       blobAlreadyExists = dataExistsResponse;
     } catch (e) {
       throw new Error(
         `Failed to assign holder: ${
           getMessageForException(e) ?? 'unknown error'
         }`,
       );
     }
 
     // 2. Upload blob contents if blob doesn't exist
     if (!blobAlreadyExists) {
       let path = input.uri;
       if (Platform.OS === 'android') {
         const resolvedPath = pathFromURI(input.uri);
         if (resolvedPath) {
           path = resolvedPath;
         }
       }
       const uploadEndpoint = blobService.httpEndpoints.UPLOAD_BLOB;
       const { method } = uploadEndpoint;
       const uploadID = await Upload.startUpload({
         url: makeBlobServiceEndpointURL(uploadEndpoint),
         method,
         path,
         type: 'multipart',
         field: 'blob_data',
         parameters: {
           blob_hash: blobHash,
         },
       });
       if (options && options.abortHandler) {
         options.abortHandler(() => {
           Upload.cancelUpload(uploadID);
         });
       }
       await new Promise((resolve, reject) => {
         Upload.addListener('error', uploadID, data => {
           reject(data.error);
         });
         Upload.addListener('cancelled', uploadID, () => {
           reject(new Error('request aborted'));
         });
         Upload.addListener('completed', uploadID, data => {
           resolve(data);
         });
         if (options && options.onProgress) {
           const { onProgress } = options;
           Upload.addListener('progress', uploadID, data =>
             onProgress(data.progress / 100),
           );
         }
       });
     }
 
     // 3. Send upload metadata to the keyserver, return response
     const { filename, mimeType, loop, dimensions, encryptionKey, thumbHash } =
       input;
     return await this.props.uploadMediaMetadata({
       ...dimensions,
       filename,
       mimeType,
       blobHolder: newHolder,
       encryptionKey,
       loop: loop ?? false,
       ...(thumbHash ? { thumbHash } : null),
     });
   }
 
   uploadBlob = async (
     url: string,
     cookie: ?string,
     sessionID: ?string,
     input: { [key: string]: mixed },
     options?: ?CallServerEndpointOptions,
   ): Promise<CallServerEndpointResponse> => {
     invariant(
       cookie &&
         input.multimedia &&
         Array.isArray(input.multimedia) &&
         input.multimedia.length === 1 &&
         input.multimedia[0] &&
         typeof input.multimedia[0] === 'object',
       'InputStateContainer.uploadBlob sent incorrect input',
     );
     const { uri, name, type } = input.multimedia[0];
     invariant(
       typeof uri === 'string' &&
         typeof name === 'string' &&
         typeof type === 'string',
       'InputStateContainer.uploadBlob sent incorrect input',
     );
 
     const parameters = {};
     parameters.cookie = cookie;
     parameters.filename = name;
 
     for (const key in input) {
       if (
         key === 'multimedia' ||
         key === 'cookie' ||
         key === 'sessionID' ||
         key === 'filename'
       ) {
         continue;
       }
       const value = input[key];
       invariant(
         typeof value === 'string',
         'blobUpload calls can only handle string values for non-multimedia keys',
       );
       parameters[key] = value;
     }
 
     let path = uri;
     if (Platform.OS === 'android') {
       const resolvedPath = pathFromURI(uri);
       if (resolvedPath) {
         path = resolvedPath;
       }
     }
     const uploadID = await Upload.startUpload({
       url,
       path,
       type: 'multipart',
       headers: {
         Accept: 'application/json',
       },
       field: 'multimedia',
       parameters,
     });
     if (options && options.abortHandler) {
       options.abortHandler(() => {
         Upload.cancelUpload(uploadID);
       });
     }
     return await new Promise((resolve, reject) => {
       Upload.addListener('error', uploadID, data => {
         reject(data.error);
       });
       Upload.addListener('cancelled', uploadID, () => {
         reject(new Error('request aborted'));
       });
       Upload.addListener('completed', uploadID, data => {
         try {
           resolve(JSON.parse(data.responseBody));
         } catch (e) {
           reject(e);
         }
       });
       if (options && options.onProgress) {
         const { onProgress } = options;
         Upload.addListener('progress', uploadID, data =>
           onProgress(data.progress / 100),
         );
       }
     });
   };
 
   handleUploadFailure(localMessageID: string, localUploadID: string) {
     this.setState(prevState => {
       const uploads = prevState.pendingUploads[localMessageID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReport(
     ids: { localID: string, localMessageID: string, serverID: ?string },
     mediaMission: MediaMission,
   ) {
     const report: MediaMissionReportCreationRequest = {
       type: reportTypes.MEDIA_MISSION,
       time: Date.now(),
       platformDetails: getConfig().platformDetails,
       mediaMission,
       uploadServerID: ids.serverID,
       uploadLocalID: ids.localID,
       messageLocalID: ids.localMessageID,
+      id: generateReportID(),
     };
     this.props.dispatch({
       type: queueReportsActionType,
       payload: {
         reports: [report],
       },
     });
   }
 
   messageHasUploadFailure = (localMessageID: string) => {
     const pendingUploads = this.state.pendingUploads[localMessageID];
     if (!pendingUploads) {
       return false;
     }
     return values(pendingUploads).some(upload => upload.failed);
   };
 
   editInputMessage = (params: EditInputBarMessageParameters) => {
     this.editInputBarCallbacks.forEach(addEditInputBarCallback =>
       addEditInputBarCallback(params),
     );
   };
 
   addEditInputMessageListener = (
     callbackEditInputBar: (params: EditInputBarMessageParameters) => void,
   ) => {
     this.editInputBarCallbacks.push(callbackEditInputBar);
   };
 
   setEditedMessage = (editedMessage: ?MessageInfo, callback?: () => void) => {
     this.setState(
       {
         editState: { editedMessage },
       },
       callback,
     );
   };
 
   removeEditInputMessageListener = (
     callbackEditInputBar: (params: EditInputBarMessageParameters) => void,
   ) => {
     this.editInputBarCallbacks = this.editInputBarCallbacks.filter(
       candidate => candidate !== callbackEditInputBar,
     );
   };
 
   retryTextMessage = async (
     rawMessageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     await this.sendTextMessage(
       {
         ...rawMessageInfo,
         time: Date.now(),
       },
       threadInfo,
       parentThreadInfo,
     );
   };
 
   retryMultimediaMessage = async (
     rawMessageInfo: RawMultimediaMessageInfo,
     localMessageID: string,
     threadInfo: ThreadInfo,
   ) => {
     const pendingUploads = this.state.pendingUploads[localMessageID] ?? {};
 
     const now = Date.now();
 
     this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const updateMedia = <T: Media>(media: $ReadOnlyArray<T>): T[] =>
       media.map(singleMedia => {
         invariant(
           singleMedia.type === 'photo' || singleMedia.type === 'video',
           'Retry selection must be unencrypted',
         );
 
         let updatedMedia = singleMedia;
 
         const oldMediaID = updatedMedia.id;
         if (
           // not complete
           isLocalUploadID(oldMediaID) &&
           // not still ongoing
           (!pendingUploads[oldMediaID] || pendingUploads[oldMediaID].failed)
         ) {
           // If we have an incomplete upload that isn't in pendingUploads, that
           // indicates the app has restarted. We'll reassign a new localID to
           // avoid collisions. Note that this isn't necessary for the message ID
           // since the localID reducer prevents collisions there
           const mediaID = pendingUploads[oldMediaID]
             ? oldMediaID
             : getNextLocalUploadID();
           if (updatedMedia.type === 'photo') {
             updatedMedia = {
               type: 'photo',
               ...updatedMedia,
               id: mediaID,
             };
           } else {
             updatedMedia = {
               type: 'video',
               ...updatedMedia,
               id: mediaID,
             };
           }
         }
 
         if (updatedMedia.type === 'video') {
           const oldThumbnailID = updatedMedia.thumbnailID;
           invariant(oldThumbnailID, 'oldThumbnailID not null or undefined');
           if (
             // not complete
             isLocalUploadID(oldThumbnailID) &&
             // not still ongoing
             (!pendingUploads[oldThumbnailID] ||
               pendingUploads[oldThumbnailID].failed)
           ) {
             const thumbnailID = pendingUploads[oldThumbnailID]
               ? oldThumbnailID
               : getNextLocalUploadID();
             updatedMedia = {
               ...updatedMedia,
               thumbnailID,
             };
           }
         }
 
         if (updatedMedia === singleMedia) {
           return singleMedia;
         }
 
         const oldSelection = updatedMedia.localMediaSelection;
         invariant(
           oldSelection,
           'localMediaSelection should be set on locally created Media',
         );
         const retries = oldSelection.retries ? oldSelection.retries + 1 : 1;
 
         // We switch for Flow
         let selection;
         if (oldSelection.step === 'photo_capture') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else if (oldSelection.step === 'photo_library') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else if (oldSelection.step === 'photo_paste') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else {
           selection = { ...oldSelection, sendTime: now, retries };
         }
 
         if (updatedMedia.type === 'photo') {
           return {
             type: 'photo',
             ...updatedMedia,
             localMediaSelection: selection,
           };
         }
         return {
           type: 'video',
           ...updatedMedia,
           localMediaSelection: selection,
         };
       });
 
     let newRawMessageInfo;
     // This conditional is for Flow
     if (rawMessageInfo.type === messageTypes.MULTIMEDIA) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: now,
         media: updateMedia(rawMessageInfo.media),
       }: RawMediaMessageInfo);
     } else if (rawMessageInfo.type === messageTypes.IMAGES) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: now,
         media: updateMedia(rawMessageInfo.media),
       }: RawImagesMessageInfo);
     } else {
       invariant(false, `rawMessageInfo ${localMessageID} should be multimedia`);
     }
 
     const incompleteMedia: Media[] = [];
     for (const singleMedia of newRawMessageInfo.media) {
       if (isLocalUploadID(singleMedia.id)) {
         incompleteMedia.push(singleMedia);
       }
     }
     if (incompleteMedia.length === 0) {
       this.dispatchMultimediaMessageAction(newRawMessageInfo);
       this.setState(prevState => ({
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: {},
         },
       }));
       return;
     }
 
     const retryMedia = incompleteMedia.filter(
       ({ id }) => !pendingUploads[id] || pendingUploads[id].failed,
     );
     if (retryMedia.length === 0) {
       // All media are already in the process of being uploaded
       return;
     }
 
     // We're not actually starting the send here,
     // we just use this action to update the message in Redux
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: newRawMessageInfo,
     });
 
     // We clear out the failed status on individual media here,
     // which makes the UI show pending status instead of error messages
     for (const singleMedia of retryMedia) {
       pendingUploads[singleMedia.id] = {
         failed: false,
         progressPercent: 0,
         processingStep: null,
       };
       if (singleMedia.type === 'video') {
         const { thumbnailID } = singleMedia;
         invariant(thumbnailID, 'thumbnailID not null or undefined');
         pendingUploads[thumbnailID] = {
           failed: false,
           progressPercent: 0,
           processingStep: null,
         };
       }
     }
     this.setState(prevState => ({
       pendingUploads: {
         ...prevState.pendingUploads,
         [localMessageID]: pendingUploads,
       },
     }));
 
     const uploadFileInputs = retryMedia.map(singleMedia => {
       invariant(
         singleMedia.localMediaSelection,
         'localMediaSelection should be set on locally created Media',
       );
 
       let ids;
       if (singleMedia.type === 'photo') {
         ids = { type: 'photo', localMediaID: singleMedia.id };
       } else {
         invariant(
           singleMedia.thumbnailID,
           'singleMedia.thumbnailID should be set for videos',
         );
         ids = {
           type: 'video',
           localMediaID: singleMedia.id,
           localThumbnailID: singleMedia.thumbnailID,
         };
       }
 
       return {
         selection: singleMedia.localMediaSelection,
         ids,
       };
     });
 
     await this.uploadFiles(localMessageID, uploadFileInputs, threadInfo);
   };
 
   retryMessage = async (
     localMessageID: string,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
 
     const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
     invariant(rawMessageInfo, `rawMessageInfo ${localMessageID} should exist`);
 
     if (rawMessageInfo.type === messageTypes.TEXT) {
       await this.retryTextMessage(rawMessageInfo, threadInfo, parentThreadInfo);
     } else if (
       rawMessageInfo.type === messageTypes.IMAGES ||
       rawMessageInfo.type === messageTypes.MULTIMEDIA
     ) {
       await this.retryMultimediaMessage(
         rawMessageInfo,
         localMessageID,
         threadInfo,
       );
     }
   };
 
   registerSendCallback = (callback: () => void) => {
     this.sendCallbacks.push(callback);
   };
 
   unregisterSendCallback = (callback: () => void) => {
     this.sendCallbacks = this.sendCallbacks.filter(
       candidate => candidate !== callback,
     );
   };
 
   reportURIDisplayed = (uri: string, loaded: boolean) => {
     const prevActiveURI = this.activeURIs.get(uri);
     const curCount = prevActiveURI && prevActiveURI.count;
     const prevCount = curCount ? curCount : 0;
     const count = loaded ? prevCount + 1 : prevCount - 1;
     const prevOnClear = prevActiveURI && prevActiveURI.onClear;
     const onClear = prevOnClear ? prevOnClear : [];
     const activeURI = { count, onClear };
     if (count) {
       this.activeURIs.set(uri, activeURI);
       return;
     }
     this.activeURIs.delete(uri);
     for (const callback of onClear) {
       callback();
     }
   };
 
   waitForCaptureURIUnload(uri: string) {
     const start = Date.now();
     const path = pathFromURI(uri);
     if (!path) {
       return Promise.resolve({
         result: null,
         steps: [
           {
             step: 'wait_for_capture_uri_unload',
             success: false,
             time: Date.now() - start,
             uri,
           },
         ],
       });
     }
 
     const getResult = () => ({
       result: path,
       steps: [
         {
           step: 'wait_for_capture_uri_unload',
           success: true,
           time: Date.now() - start,
           uri,
         },
       ],
     });
 
     const activeURI = this.activeURIs.get(uri);
     if (!activeURI) {
       return Promise.resolve(getResult());
     }
 
     return new Promise(resolve => {
       const finish = () => resolve(getResult());
       const newActiveURI = {
         ...activeURI,
         onClear: [...activeURI.onClear, finish],
       };
       this.activeURIs.set(uri, newActiveURI);
     });
   }
 
   setPendingThreadUpdateHandler = (
     threadID: string,
     pendingThreadUpdateHandler: ?(ThreadInfo) => mixed,
   ) => {
     if (!pendingThreadUpdateHandler) {
       this.pendingThreadUpdateHandlers.delete(threadID);
     } else {
       this.pendingThreadUpdateHandlers.set(
         threadID,
         pendingThreadUpdateHandler,
       );
     }
   };
 
   render() {
     const inputState = this.inputStateSelector(this.state);
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const mediaCreationLoadingStatusSelector = createLoadingStatusSelector(
   sendMultimediaMessageActionTypes,
 );
 const textCreationLoadingStatusSelector = createLoadingStatusSelector(
   sendTextMessageActionTypes,
 );
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedInputStateContainer(
     props: BaseProps,
   ) {
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const nextLocalID = useSelector(state => state.nextLocalID);
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const ongoingMessageCreation = useSelector(
       state =>
         combineLoadingStatuses(
           mediaCreationLoadingStatusSelector(state),
           textCreationLoadingStatusSelector(state),
         ) === 'loading',
     );
     const hasWiFi = useSelector(state => state.connectivity.hasWiFi);
     const calendarQuery = useCalendarQuery();
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callUploadMediaMetadata = useServerCall(uploadMediaMetadata);
     const callSendMultimediaMessage = useServerCall(sendMultimediaMessage);
     const callSendTextMessage = useServerCall(sendTextMessage);
     const callNewThread = useServerCall(newThread);
     const dispatchActionPromise = useDispatchActionPromise();
     const dispatch = useDispatch();
     const mediaReportsEnabled = useIsReportEnabled('mediaReports');
     const staffCanSee = useStaffCanSee();
     const textMessageCreationSideEffectsFunc =
       useMessageCreationSideEffectsFunc(messageTypes.TEXT);
 
     return (
       <InputStateContainer
         {...props}
         uploadMediaMetadata={callUploadMediaMetadata}
         viewerID={viewerID}
         nextLocalID={nextLocalID}
         messageStoreMessages={messageStoreMessages}
         ongoingMessageCreation={ongoingMessageCreation}
         hasWiFi={hasWiFi}
         mediaReportsEnabled={mediaReportsEnabled}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatchActionPromise={dispatchActionPromise}
         dispatch={dispatch}
         staffCanSee={staffCanSee}
         textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}
       />
     );
   });
 
 export default ConnectedInputStateContainer;
diff --git a/native/media/save-media.js b/native/media/save-media.js
index 886e4dd97..0bb7e4c05 100644
--- a/native/media/save-media.js
+++ b/native/media/save-media.js
@@ -1,463 +1,467 @@
 // @flow
 
 import * as MediaLibrary from 'expo-media-library';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform, PermissionsAndroid } from 'react-native';
 import filesystem from 'react-native-fs';
 import { useDispatch } from 'react-redux';
 
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
 import { readableFilename, pathFromURI } from 'lib/media/file-utils.js';
 import { isLocalUploadID } from 'lib/media/media-utils.js';
 import type {
   MediaMissionStep,
   MediaMissionResult,
   MediaMissionFailure,
 } from 'lib/types/media-types.js';
 import {
   reportTypes,
   type MediaMissionReportCreationRequest,
 } from 'lib/types/report-types.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException } from 'lib/utils/errors.js';
 import { promiseAll } from 'lib/utils/promises.js';
-import { useIsReportEnabled } from 'lib/utils/report-utils.js';
+import {
+  generateReportID,
+  useIsReportEnabled,
+} from 'lib/utils/report-utils.js';
 
 import { fetchBlob } from './blob-utils.js';
 import {
   fetchAssetInfo,
   fetchFileInfo,
   disposeTempFile,
   mkdir,
   androidScanFile,
   fetchFileHash,
   copyFile,
   temporaryDirectoryPath,
 } from './file-utils.js';
 import { getMediaLibraryIdentifier } from './identifier-utils.js';
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import { requestAndroidPermission } from '../utils/android-permissions.js';
 
 export type IntentionalSaveMedia = (
   uri: string,
   ids: {
     uploadID: string,
     messageServerID: ?string,
     messageLocalID: ?string,
   },
 ) => Promise<void>;
 
 function useIntentionalSaveMedia(): IntentionalSaveMedia {
   const dispatch = useDispatch();
   const mediaReportsEnabled = useIsReportEnabled('mediaReports');
   return React.useCallback(
     async (
       uri: string,
       ids: {
         uploadID: string,
         messageServerID: ?string,
         messageLocalID: ?string,
       },
     ) => {
       const start = Date.now();
       const steps = [{ step: 'save_media', uri, time: start }];
 
       const { resultPromise, reportPromise } = saveMedia(uri, 'request');
       const result = await resultPromise;
       const userTime = Date.now() - start;
 
       let message;
       if (result.success) {
         message = 'saved!';
       } else if (result.reason === 'save_unsupported') {
         const os = Platform.select({
           ios: 'iOS',
           android: 'Android',
           default: Platform.OS,
         });
         message = `saving media is unsupported on ${os}`;
       } else if (result.reason === 'missing_permission') {
         message = 'don’t have permission :(';
       } else if (
         result.reason === 'resolve_failed' ||
         result.reason === 'data_uri_failed'
       ) {
         message = 'failed to resolve :(';
       } else if (result.reason === 'fetch_failed') {
         message = 'failed to download :(';
       } else {
         message = 'failed to save :(';
       }
       displayActionResultModal(message);
 
       if (!mediaReportsEnabled) {
         return;
       }
       const reportSteps = await reportPromise;
       steps.push(...reportSteps);
       const totalTime = Date.now() - start;
       const mediaMission = { steps, result, userTime, totalTime };
 
       const { uploadID, messageServerID, messageLocalID } = ids;
       const uploadIDIsLocal = isLocalUploadID(uploadID);
       const report: MediaMissionReportCreationRequest = {
         type: reportTypes.MEDIA_MISSION,
         time: Date.now(),
         platformDetails: getConfig().platformDetails,
         mediaMission,
         uploadServerID: uploadIDIsLocal ? undefined : uploadID,
         uploadLocalID: uploadIDIsLocal ? uploadID : undefined,
         messageServerID,
         messageLocalID,
+        id: generateReportID(),
       };
       dispatch({
         type: queueReportsActionType,
         payload: { reports: [report] },
       });
     },
     [dispatch, mediaReportsEnabled],
   );
 }
 
 type Permissions = 'check' | 'request';
 
 function saveMedia(
   uri: string,
   permissions?: Permissions = 'check',
 ): {
   resultPromise: Promise<MediaMissionResult>,
   reportPromise: Promise<$ReadOnlyArray<MediaMissionStep>>,
 } {
   let resolveResult;
   const sendResult = result => {
     if (resolveResult) {
       resolveResult(result);
     }
   };
 
   const reportPromise = innerSaveMedia(uri, permissions, sendResult);
   const resultPromise = new Promise(resolve => {
     resolveResult = resolve;
   });
 
   return { reportPromise, resultPromise };
 }
 
 async function innerSaveMedia(
   uri: string,
   permissions: Permissions,
   sendResult: (result: MediaMissionResult) => void,
 ): Promise<$ReadOnlyArray<MediaMissionStep>> {
   if (Platform.OS === 'android') {
     return await saveMediaAndroid(uri, permissions, sendResult);
   } else if (Platform.OS === 'ios') {
     return await saveMediaIOS(uri, sendResult);
   } else {
     sendResult({ success: false, reason: 'save_unsupported' });
     return [];
   }
 }
 
 const androidSavePermission =
   PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;
 
 // On Android, we save the media to our own Comm folder in the
 // Pictures directory, and then trigger the media scanner to pick it up
 async function saveMediaAndroid(
   inputURI: string,
   permissions: Permissions,
   sendResult: (result: MediaMissionResult) => void,
 ): Promise<$ReadOnlyArray<MediaMissionStep>> {
   const steps = [];
 
   let hasPermission = false,
     permissionCheckExceptionMessage;
   const permissionCheckStart = Date.now();
   try {
     hasPermission = await requestAndroidPermission(
       androidSavePermission,
       'throw',
     );
   } catch (e) {
     permissionCheckExceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'permissions_check',
     success: hasPermission,
     exceptionMessage: permissionCheckExceptionMessage,
     time: Date.now() - permissionCheckStart,
     platform: Platform.OS,
     permissions: [androidSavePermission],
   });
   if (!hasPermission) {
     sendResult({ success: false, reason: 'missing_permission' });
     return steps;
   }
 
   const promises = [];
   let success = true;
   const saveFolder = `${filesystem.PicturesDirectoryPath}/Comm/`;
   promises.push(
     (async () => {
       const makeDirectoryStep = await mkdir(saveFolder);
       if (!makeDirectoryStep.success) {
         success = false;
         sendResult({ success, reason: 'make_directory_failed' });
       }
       steps.push(makeDirectoryStep);
     })(),
   );
 
   let uri = inputURI;
   let tempFile, mime;
   if (uri.startsWith('http')) {
     promises.push(
       (async () => {
         const { result: tempSaveResult, steps: tempSaveSteps } =
           await saveRemoteMediaToDisk(uri, temporaryDirectoryPath);
         steps.push(...tempSaveSteps);
         if (!tempSaveResult.success) {
           success = false;
           sendResult(tempSaveResult);
         } else {
           tempFile = tempSaveResult.path;
           uri = `file://${tempFile}`;
           mime = tempSaveResult.mime;
         }
       })(),
     );
   }
 
   await Promise.all(promises);
   if (!success) {
     return steps;
   }
 
   const { result: copyResult, steps: copySteps } = await copyToSortedDirectory(
     uri,
     saveFolder,
     mime,
   );
   steps.push(...copySteps);
   if (!copyResult.success) {
     sendResult(copyResult);
     return steps;
   }
   sendResult({ success: true });
 
   const postResultPromises = [];
 
   postResultPromises.push(
     (async () => {
       const scanFileStep = await androidScanFile(copyResult.path);
       steps.push(scanFileStep);
     })(),
   );
 
   if (tempFile) {
     postResultPromises.push(
       (async (file: string) => {
         const disposeStep = await disposeTempFile(file);
         steps.push(disposeStep);
       })(tempFile),
     );
   }
 
   await Promise.all(postResultPromises);
   return steps;
 }
 
 // On iOS, we save the media to the camera roll
 async function saveMediaIOS(
   inputURI: string,
   sendResult: (result: MediaMissionResult) => void,
 ): Promise<$ReadOnlyArray<MediaMissionStep>> {
   const steps = [];
 
   let uri = inputURI;
   let tempFile;
   if (uri.startsWith('http')) {
     const { result: tempSaveResult, steps: tempSaveSteps } =
       await saveRemoteMediaToDisk(uri, temporaryDirectoryPath);
     steps.push(...tempSaveSteps);
     if (!tempSaveResult.success) {
       sendResult(tempSaveResult);
       return steps;
     }
     tempFile = tempSaveResult.path;
     uri = `file://${tempFile}`;
   } else if (!uri.startsWith('file://')) {
     const mediaNativeID = getMediaLibraryIdentifier(uri);
     if (mediaNativeID) {
       const { result: fetchAssetInfoResult, steps: fetchAssetInfoSteps } =
         await fetchAssetInfo(mediaNativeID);
       steps.push(...fetchAssetInfoSteps);
       const { localURI } = fetchAssetInfoResult;
       if (localURI) {
         uri = localURI;
       }
     }
   }
 
   if (!uri.startsWith('file://')) {
     sendResult({ success: false, reason: 'resolve_failed', uri });
     return steps;
   }
 
   let success = false,
     exceptionMessage;
   const start = Date.now();
   try {
     await MediaLibrary.saveToLibraryAsync(uri);
     success = true;
   } catch (e) {
     exceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'ios_save_to_library',
     success,
     exceptionMessage,
     time: Date.now() - start,
     uri,
   });
 
   if (success) {
     sendResult({ success: true });
   } else {
     sendResult({ success: false, reason: 'save_to_library_failed', uri });
   }
 
   if (tempFile) {
     const disposeStep = await disposeTempFile(tempFile);
     steps.push(disposeStep);
   }
   return steps;
 }
 
 type IntermediateSaveResult = {
   result: { success: true, path: string, mime: string } | MediaMissionFailure,
   steps: $ReadOnlyArray<MediaMissionStep>,
 };
 
 async function saveRemoteMediaToDisk(
   inputURI: string,
   directory: string, // should end with a /
 ): Promise<IntermediateSaveResult> {
   const steps = [];
 
   const { result: fetchBlobResult, steps: fetchBlobSteps } = await fetchBlob(
     inputURI,
   );
   steps.push(...fetchBlobSteps);
   if (!fetchBlobResult.success) {
     return { result: fetchBlobResult, steps };
   }
   const { mime, base64 } = fetchBlobResult;
 
   const tempName = readableFilename('', mime);
   if (!tempName) {
     return {
       result: { success: false, reason: 'mime_check_failed', mime },
       steps,
     };
   }
   const tempPath = `${directory}tempsave.${tempName}`;
 
   const start = Date.now();
   let success = false,
     exceptionMessage;
   try {
     await filesystem.writeFile(tempPath, base64, 'base64');
     success = true;
   } catch (e) {
     exceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'write_file',
     success,
     exceptionMessage,
     time: Date.now() - start,
     path: tempPath,
     length: base64.length,
   });
 
   if (!success) {
     return { result: { success: false, reason: 'write_file_failed' }, steps };
   }
   return { result: { success: true, path: tempPath, mime }, steps };
 }
 
 async function copyToSortedDirectory(
   localURI: string,
   directory: string, // should end with a /
   inputMIME: ?string,
 ): Promise<IntermediateSaveResult> {
   const steps = [];
 
   const path = pathFromURI(localURI);
   if (!path) {
     return {
       result: { success: false, reason: 'resolve_failed', uri: localURI },
       steps,
     };
   }
   let mime = inputMIME;
 
   const promises = {};
   promises.hashStep = fetchFileHash(path);
   if (!mime) {
     promises.fileInfoResult = fetchFileInfo(localURI, undefined, {
       mime: true,
     });
   }
   const { hashStep, fileInfoResult } = await promiseAll(promises);
 
   steps.push(hashStep);
   if (!hashStep.success) {
     return {
       result: { success: false, reason: 'fetch_file_hash_failed' },
       steps,
     };
   }
   const { hash } = hashStep;
   invariant(hash, 'hash should be truthy if hashStep.success is truthy');
 
   if (fileInfoResult) {
     steps.push(...fileInfoResult.steps);
     if (fileInfoResult.result.success && fileInfoResult.result.mime) {
       ({ mime } = fileInfoResult.result);
     }
   }
   if (!mime) {
     return {
       result: { success: false, reason: 'mime_check_failed', mime },
       steps,
     };
   }
 
   const name = readableFilename(hash, mime);
   if (!name) {
     return {
       result: { success: false, reason: 'mime_check_failed', mime },
       steps,
     };
   }
   const newPath = `${directory}${name}`;
 
   const copyStep = await copyFile(path, newPath);
   steps.push(copyStep);
   if (!copyStep.success) {
     return {
       result: { success: false, reason: 'copy_file_failed' },
       steps,
     };
   }
 
   return {
     result: { success: true, path: newPath, mime },
     steps,
   };
 }
 
 export { useIntentionalSaveMedia, saveMedia };
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index 7ff148e36..27f3a5337 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1775 +1,1777 @@
 // @flow
 
 import { detect as detectBrowser } from 'detect-browser';
 import invariant from 'invariant';
 import _groupBy from 'lodash/fp/groupBy.js';
 import _keyBy from 'lodash/fp/keyBy.js';
 import _omit from 'lodash/fp/omit.js';
 import _partition from 'lodash/fp/partition.js';
 import _sortBy from 'lodash/fp/sortBy.js';
 import _memoize from 'lodash/memoize.js';
 import _throttle from 'lodash/throttle.js';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { createSelector } from 'reselect';
 import uuid from 'uuid';
 
 import {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   legacySendMultimediaMessage,
   sendTextMessageActionTypes,
   sendTextMessage,
 } from 'lib/actions/message-actions.js';
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
 import { newThread } from 'lib/actions/thread-actions.js';
 import {
   uploadMultimedia,
   uploadMediaMetadata,
   updateMultimediaMessageMediaActionType,
   deleteUpload,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
 } from 'lib/actions/upload-actions.js';
 import {
   useModalContext,
   type PushModal,
 } from 'lib/components/modal-provider.react.js';
 import blobService from 'lib/facts/blob-service.js';
 import commStaffCommunity from 'lib/facts/comm-staff-community.js';
 import { getNextLocalUploadID } from 'lib/media/media-utils.js';
 import { pendingToRealizedThreadIDsSelector } from 'lib/selectors/thread-selectors.js';
 import {
   createMediaMessageInfo,
   localIDPrefix,
   useMessageCreationSideEffectsFunc,
 } from 'lib/shared/message-utils.js';
 import type { CreationSideEffectsFunc } from 'lib/shared/messages/message-spec.js';
 import {
   createRealThreadFromPendingThread,
   draftKeyFromThreadID,
   threadIsPending,
   threadIsPendingSidebar,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   UploadMultimediaResult,
   UploadMediaMetadataRequest,
   MediaMissionStep,
   MediaMissionFailure,
   MediaMissionResult,
   MediaMission,
   Dimensions,
 } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import {
   type RawMessageInfo,
   type RawMultimediaMessageInfo,
   type SendMessageResult,
   type SendMessagePayload,
 } from 'lib/types/message-types.js';
 import type { RawImagesMessageInfo } from 'lib/types/messages/images.js';
 import type { RawMediaMessageInfo } from 'lib/types/messages/media.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { reportTypes } from 'lib/types/report-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import {
   type ClientNewThreadRequest,
   type NewThreadResult,
   type ThreadInfo,
   type RawThreadInfo,
 } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { toBase64URL } from 'lib/utils/base64.js';
 import {
   makeBlobServiceEndpointURL,
   holderFromBlobServiceURI,
   isBlobServiceURI,
 } from 'lib/utils/blob-service.js';
 import type { CallServerEndpointOptions } from 'lib/utils/call-server-endpoint.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException, cloneError } from 'lib/utils/errors.js';
+import { generateReportID } from 'lib/utils/report-utils.js';
 
 import {
   type PendingMultimediaUpload,
   type TypeaheadState,
   InputStateContext,
 } from './input-state.js';
 import { encryptFile } from '../media/encryption-utils.js';
 import { generateThumbHash } from '../media/image-utils.js';
 import { validateFile, preloadImage } from '../media/media-utils.js';
 import InvalidUploadModal from '../modals/chat/invalid-upload.react.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors.js';
 
 const browser = detectBrowser();
 const exifRotate =
   !browser || (browser.name !== 'safari' && browser.name !== 'chrome');
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +drafts: { +[key: string]: string },
   +viewerID: ?string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +threadStoreThreadInfos: { +[id: string]: RawThreadInfo },
   +pendingRealizedThreadIDs: $ReadOnlyMap<string, string>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +calendarQuery: () => CalendarQuery,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +uploadMediaMetadata: (
     input: UploadMediaMetadataRequest,
   ) => Promise<UploadMultimediaResult>,
   +deleteUpload: (id: string) => Promise<void>,
   +sendMultimediaMessage: (
     threadID: string,
     localID: string,
     mediaIDs: $ReadOnlyArray<string>,
     sidebarCreation?: boolean,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (
     threadID: string,
     localID: string,
     text: string,
     sidebarCreation?: boolean,
   ) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
   +pushModal: PushModal,
   +sendCallbacks: $ReadOnlyArray<() => mixed>,
   +registerSendCallback: (() => mixed) => void,
   +unregisterSendCallback: (() => mixed) => void,
   +textMessageCreationSideEffectsFunc: CreationSideEffectsFunc<RawTextMessageInfo>,
 };
 type State = {
   +pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
   +textCursorPositions: { [threadID: string]: number },
   +typeaheadState: TypeaheadState,
 };
 
 type PropsAndState = {
   ...Props,
   ...State,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
     textCursorPositions: {},
     typeaheadState: {
       canBeVisible: false,
       keepUpdatingThreadMembers: true,
       frozenMentionsCandidates: [],
       moveChoiceUp: null,
       moveChoiceDown: null,
       close: null,
       accept: null,
     },
   };
   replyCallbacks: Array<(message: string) => void> = [];
   pendingThreadCreations = new Map<string, Promise<string>>();
   // TODO: flip the switch
   // Note that this enables Blob service for encrypted media only
   useBlobServiceUploads = false;
 
   // When the user sends a multimedia message that triggers the creation of a
   // sidebar, the sidebar gets created right away, but the message needs to wait
   // for the uploads to complete before sending. We use this Set to track the
   // message localIDs that need sidebarCreation: true.
   pendingSidebarCreationMessageLocalIDs = new Set<string>();
 
   static reassignToRealizedThreads<T>(
     state: { +[threadID: string]: T },
     props: Props,
   ): ?{ [threadID: string]: T } {
     const newState = {};
     let updated = false;
     for (const threadID in state) {
       const newThreadID =
         props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
       if (newThreadID !== threadID) {
         updated = true;
       }
       newState[newThreadID] = state[threadID];
     }
     return updated ? newState : null;
   }
 
   static getDerivedStateFromProps(props: Props, state: State) {
     const pendingUploads = InputStateContainer.reassignToRealizedThreads(
       state.pendingUploads,
       props,
     );
     const textCursorPositions = InputStateContainer.reassignToRealizedThreads(
       state.textCursorPositions,
       props,
     );
 
     if (!pendingUploads && !textCursorPositions) {
       return null;
     }
 
     const stateUpdate = {};
     if (pendingUploads) {
       stateUpdate.pendingUploads = pendingUploads;
     }
     if (textCursorPositions) {
       stateUpdate.textCursorPositions = textCursorPositions;
     }
     return stateUpdate;
   }
 
   static completedMessageIDs(state: State) {
     const completed = new Map();
     for (const threadID in state.pendingUploads) {
       const pendingUploads = state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID, serverID, failed } = upload;
         if (!messageID || !messageID.startsWith(localIDPrefix)) {
           continue;
         }
         if (!serverID || failed) {
           completed.set(messageID, false);
           continue;
         }
         if (completed.get(messageID) === undefined) {
           completed.set(messageID, true);
         }
       }
     }
     const messageIDs = new Set();
     for (const [messageID, isCompleted] of completed) {
       if (isCompleted) {
         messageIDs.add(messageID);
       }
     }
     return messageIDs;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const previouslyAssignedMessageIDs = new Set();
     for (const threadID in prevState.pendingUploads) {
       const pendingUploads = prevState.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const { messageID } = pendingUploads[localUploadID];
         if (messageID) {
           previouslyAssignedMessageIDs.add(messageID);
         }
       }
     }
 
     const newlyAssignedUploads = new Map();
     for (const threadID in this.state.pendingUploads) {
       const pendingUploads = this.state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID } = upload;
         if (
           !messageID ||
           !messageID.startsWith(localIDPrefix) ||
           previouslyAssignedMessageIDs.has(messageID)
         ) {
           continue;
         }
         let assignedUploads = newlyAssignedUploads.get(messageID);
         if (!assignedUploads) {
           assignedUploads = { threadID, uploads: [] };
           newlyAssignedUploads.set(messageID, assignedUploads);
         }
         assignedUploads.uploads.push(upload);
       }
     }
 
     const newMessageInfos = new Map();
     for (const [messageID, assignedUploads] of newlyAssignedUploads) {
       const { uploads, threadID } = assignedUploads;
       const creatorID = this.props.viewerID;
       invariant(creatorID, 'need viewer ID in order to send a message');
       const media = uploads.map(
         ({
           localID,
           serverID,
           uri,
           mediaType,
           dimensions,
           encryptionKey,
           thumbHash,
         }) => {
           // 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.
           const shimmedDimensions = dimensions ?? { height: 0, width: 0 };
           invariant(
             mediaType === 'photo' || mediaType === 'encrypted_photo',
             "web InputStateContainer can't handle video",
           );
           if (
             mediaType !== 'encrypted_photo' &&
             mediaType !== 'encrypted_video'
           ) {
             return {
               id: serverID ? serverID : localID,
               uri,
               type: 'photo',
               dimensions: shimmedDimensions,
               thumbHash,
             };
           }
           invariant(
             encryptionKey,
             'encrypted media must have an encryption key',
           );
           return {
             id: serverID ? serverID : localID,
             holder: uri,
             type: 'encrypted_photo',
             encryptionKey,
             dimensions: shimmedDimensions,
             thumbHash,
           };
         },
       );
       const messageInfo = createMediaMessageInfo(
         {
           localID: messageID,
           threadID,
           creatorID,
           media,
         },
         { forceMultimediaMessageType: this.shouldEncryptMedia(threadID) },
       );
       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;
   }
 
   shouldEncryptMedia(threadID: ?string): boolean {
     if (!threadID) {
       return false;
     }
     const threadInfo = this.props.threadStoreThreadInfos[threadID];
     return threadInfoInsideCommunity(threadInfo, commStaffCommunity.id);
   }
 
   async sendMultimediaMessage(messageInfo: RawMultimediaMessageInfo) {
     if (!threadIsPending(messageInfo.threadID)) {
       this.props.dispatchActionPromise(
         sendMultimediaMessageActionTypes,
         this.sendMultimediaMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       const threadCreationPromise = this.pendingThreadCreations.get(
         messageInfo.threadID,
       );
       if (!threadCreationPromise) {
         // When we create or retry multimedia message, we add a promise to
         // pendingThreadCreations map. This promise can be removed in
         // sendMultimediaMessage and sendTextMessage methods. When any of these
         // method remove the promise, it has to be settled. If the promise was
         // fulfilled, this method would be called with realized thread, so we
         // can conclude that the promise was rejected. We don't have enough info
         // here to retry the thread creation, but we can mark the message as
         // failed. Then the retry will be possible and promise will be created
         // again.
         throw new Error('Thread creation failed');
       }
       newThreadID = await threadCreationPromise;
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendMultimediaMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(messageInfo.threadID);
     }
 
     // While the thread was being created, the image preload may have completed,
     // and we might have a finalized URI now. So we fetch from Redux again
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should exist for locally-created RawMessageInfo',
     );
     const latestMessageInfo = this.getRawMultimediaMessageInfo(localID);
 
     // Conditional is necessary for Flow
     let newMessageInfo;
     if (latestMessageInfo.type === messageTypes.MULTIMEDIA) {
       newMessageInfo = {
         ...latestMessageInfo,
         threadID: newThreadID,
         time: Date.now(),
       };
     } else {
       newMessageInfo = {
         ...latestMessageInfo,
         threadID: newThreadID,
         time: Date.now(),
       };
     }
 
     this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
       this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<SendMessagePayload> {
     const { localID, threadID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     const sidebarCreation =
       this.pendingSidebarCreationMessageLocalIDs.has(localID);
     const mediaIDs = [];
     for (const { id } of messageInfo.media) {
       mediaIDs.push(id);
     }
     try {
       const result = await this.props.sendMultimediaMessage(
         threadID,
         localID,
         mediaIDs,
         sidebarCreation,
       );
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       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;
     }
   }
 
   startThreadCreation(threadInfo: ThreadInfo): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return Promise.resolve(threadInfo.id);
     }
     let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
     if (!threadCreationPromise) {
       const calendarQuery = this.props.calendarQuery();
       threadCreationPromise = createRealThreadFromPendingThread({
         threadInfo,
         dispatchActionPromise: this.props.dispatchActionPromise,
         createNewThread: this.props.newThread,
         sourceMessageID: threadInfo.sourceMessageID,
         viewerID: this.props.viewerID,
         calendarQuery,
       });
       this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
     }
     return threadCreationPromise;
   }
 
   inputBaseStateSelector = _memoize((threadID: ?string) =>
     createSelector(
       (propsAndState: PropsAndState) =>
         threadID ? propsAndState.pendingUploads[threadID] : null,
       (propsAndState: PropsAndState) =>
         threadID ? propsAndState.drafts[draftKeyFromThreadID(threadID)] : null,
       (propsAndState: PropsAndState) =>
         threadID ? propsAndState.textCursorPositions[threadID] : null,
       (
         pendingUploads: ?{ [localUploadID: string]: PendingMultimediaUpload },
         draft: ?string,
         textCursorPosition: ?number,
       ) => {
         let threadPendingUploads = [];
         const assignedUploads = {};
         if (pendingUploads) {
           const [uploadsWithMessageIDs, uploadsWithoutMessageIDs] =
             _partition('messageID')(pendingUploads);
           threadPendingUploads = _sortBy('localID')(uploadsWithoutMessageIDs);
           const threadAssignedUploads = _groupBy('messageID')(
             uploadsWithMessageIDs,
           );
           for (const messageID in threadAssignedUploads) {
             // lodash libdefs don't return $ReadOnlyArray
             assignedUploads[messageID] = [...threadAssignedUploads[messageID]];
           }
         }
         return {
           pendingUploads: threadPendingUploads,
           assignedUploads,
           draft: draft ?? '',
           textCursorPosition: textCursorPosition ?? 0,
           appendFiles: (files: $ReadOnlyArray<File>) =>
             this.appendFiles(threadID, files),
           cancelPendingUpload: (localUploadID: string) =>
             this.cancelPendingUpload(threadID, localUploadID),
           sendTextMessage: (
             messageInfo: RawTextMessageInfo,
             threadInfo: ThreadInfo,
             parentThreadInfo: ?ThreadInfo,
           ) => this.sendTextMessage(messageInfo, threadInfo, parentThreadInfo),
           createMultimediaMessage: (localID: number, threadInfo: ThreadInfo) =>
             this.createMultimediaMessage(localID, threadInfo),
           setDraft: (newDraft: string) => this.setDraft(threadID, newDraft),
           setTextCursorPosition: (newPosition: number) =>
             this.setTextCursorPosition(threadID, newPosition),
           messageHasUploadFailure: (localMessageID: string) =>
             this.messageHasUploadFailure(assignedUploads[localMessageID]),
           retryMultimediaMessage: (
             localMessageID: string,
             threadInfo: ThreadInfo,
           ) =>
             this.retryMultimediaMessage(
               localMessageID,
               threadInfo,
               assignedUploads[localMessageID],
             ),
           addReply: (message: string) => this.addReply(message),
           addReplyListener: this.addReplyListener,
           removeReplyListener: this.removeReplyListener,
           registerSendCallback: this.props.registerSendCallback,
           unregisterSendCallback: this.props.unregisterSendCallback,
         };
       },
     ),
   );
 
   typeaheadStateSelector = createSelector(
     (propsAndState: PropsAndState) => propsAndState.typeaheadState,
     (typeaheadState: TypeaheadState) => ({
       typeaheadState,
       setTypeaheadState: this.setTypeaheadState,
     }),
   );
 
   inputStateSelector = createSelector(
     state => state.inputBaseState,
     state => state.typeaheadState,
     (inputBaseState, typeaheadState) => ({
       ...inputBaseState,
       ...typeaheadState,
     }),
   );
 
   getRealizedOrPendingThreadID(threadID: string): string {
     return this.props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
   }
 
   async appendFiles(
     threadID: ?string,
     files: $ReadOnlyArray<File>,
   ): Promise<boolean> {
     invariant(threadID, 'threadID should be set in appendFiles');
 
     const selectionTime = Date.now();
     const { pushModal } = this.props;
 
     const appendResults = await Promise.all(
       files.map(file => this.appendFile(threadID, file, selectionTime)),
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
       pushModal(<InvalidUploadModal />);
 
       const time = Date.now() - selectionTime;
       const reports = [];
       for (const appendResult of appendResults) {
         const { steps } = appendResult;
         let { result } = appendResult;
         let uploadLocalID;
         if (result.success) {
           uploadLocalID = result.pendingUpload.localID;
           result = { success: false, reason: 'web_sibling_validation_failed' };
         }
         const mediaMission = { steps, result, userTime: time, totalTime: time };
         reports.push({ mediaMission, uploadLocalID });
       }
       this.queueMediaMissionReports(reports);
 
       return false;
     }
 
     const newUploads = appendResults.map(({ result }) => {
       invariant(result.success, 'any failed validation should be caught above');
       return result.pendingUpload;
     });
 
     const newUploadsObject = _keyBy('localID')(newUploads);
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const mergedUploads = prevUploads
           ? { ...prevUploads, ...newUploadsObject }
           : newUploadsObject;
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: mergedUploads,
           },
         };
       },
       () => this.uploadFiles(threadID, newUploads),
     );
     return true;
   }
 
   async appendFile(
     threadID: ?string,
     file: File,
     selectTime: number,
   ): Promise<{
     steps: $ReadOnlyArray<MediaMissionStep>,
     result:
       | MediaMissionFailure
       | { success: true, pendingUpload: PendingMultimediaUpload },
   }> {
     const steps = [
       {
         step: 'web_selection',
         filename: file.name,
         size: file.size,
         mime: file.type,
         selectTime,
       },
     ];
 
     let response;
     const validationStart = Date.now();
     try {
       response = await validateFile(file, exifRotate);
     } catch (e) {
       return {
         steps,
         result: {
           success: false,
           reason: 'processing_exception',
           time: Date.now() - validationStart,
           exceptionMessage: getMessageForException(e),
         },
       };
     }
     const { steps: validationSteps, result } = response;
     steps.push(...validationSteps);
     if (!result.success) {
       return { steps, result };
     }
     const { uri, file: fixedFile, mediaType, dimensions } = result;
 
     let encryptionResult;
     if (this.shouldEncryptMedia(threadID)) {
       let encryptionResponse;
       const encryptionStart = Date.now();
       try {
         encryptionResponse = await encryptFile(fixedFile);
       } catch (e) {
         return {
           steps,
           result: {
             success: false,
             reason: 'encryption_exception',
             time: Date.now() - encryptionStart,
             exceptionMessage: getMessageForException(e),
           },
         };
       }
       steps.push(...encryptionResponse.steps);
       encryptionResult = encryptionResponse.result;
     }
     if (encryptionResult && !encryptionResult.success) {
       return { steps, result: encryptionResult };
     }
 
     const { steps: thumbHashSteps, result: thumbHashResult } =
       await generateThumbHash(fixedFile, encryptionResult?.encryptionKey);
     const thumbHash = thumbHashResult.success
       ? thumbHashResult.thumbHash
       : null;
     steps.push(...thumbHashSteps);
 
     return {
       steps,
       result: {
         success: true,
         pendingUpload: {
           localID: getNextLocalUploadID(),
           serverID: null,
           messageID: null,
           failed: false,
           file: encryptionResult?.file ?? fixedFile,
           mediaType: encryptionResult ? 'encrypted_photo' : mediaType,
           dimensions,
           uri: encryptionResult?.uri ?? uri,
           loop: false,
           uriIsReal: false,
           blobHash: encryptionResult?.sha256Hash,
           encryptionKey: encryptionResult?.encryptionKey,
           thumbHash,
           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, encryptionKey } = upload;
     const isEncrypted =
       !!encryptionKey &&
       (upload.mediaType === 'encrypted_photo' ||
         upload.mediaType === 'encrypted_video');
 
     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 {
       const callbacks = {
         onProgress: (percent: number) =>
           this.setProgress(threadID, localID, percent),
         abortHandler: (abort: () => void) =>
           this.handleAbortCallback(threadID, localID, abort),
       };
       if (
         this.useBlobServiceUploads &&
         (upload.mediaType === 'encrypted_photo' ||
           upload.mediaType === 'encrypted_video')
       ) {
         const { blobHash, dimensions, thumbHash } = upload;
         invariant(
           encryptionKey && blobHash && dimensions,
           'incomplete encrypted upload',
         );
         uploadResult = await this.blobServiceUpload(
           {
             file: upload.file,
             blobHash,
             encryptionKey,
             dimensions,
             loop: false,
             ...(thumbHash ? { thumbHash } : undefined),
           },
           { ...callbacks },
         );
       } else {
         let uploadExtras = {
           ...upload.dimensions,
           loop: false,
           thumbHash: upload.thumbHash,
         };
         if (encryptionKey) {
           uploadExtras = { ...uploadExtras, encryptionKey };
         }
         uploadResult = await this.props.uploadMultimedia(
           upload.file,
           uploadExtras,
           callbacks,
         );
       }
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       this.handleUploadFailure(threadID, localID);
     }
     userTime = Date.now() - selectTime;
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: upload.file.name,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
     });
     if (!uploadResult) {
       sendReport({
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       });
       return;
     }
     const result = uploadResult;
     const outputMediaType = isEncrypted ? 'encrypted_photo' : result.mediaType;
 
     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,
             },
           },
         },
       };
     });
 
     // we cannot preload encrypted media this way, we don't have cache
     if (!encryptionKey) {
       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;
       const { thumbHash } = upload;
       let mediaUpdate = {
         loop,
         dimensions,
         ...(thumbHash ? { thumbHash } : undefined),
       };
       if (!isEncrypted) {
         mediaUpdate = {
           ...mediaUpdate,
           type: mediaType,
           uri,
         };
       } else {
         mediaUpdate = {
           ...mediaUpdate,
           type: outputMediaType,
           holder: uri,
           encryptionKey,
         };
       }
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterPreload.messageID,
           currentMediaID: uploadAfterPreload.serverID
             ? uploadAfterPreload.serverID
             : uploadAfterPreload.localID,
           mediaUpdate,
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning URI`,
       );
       const { messageID } = currentUpload;
       if (messageID && !messageID.startsWith(localIDPrefix)) {
         const newPendingUploads = _omit([localID])(uploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               uri: result.uri,
               mediaType: outputMediaType,
               dimensions: result.dimensions,
               uriIsReal: true,
               loop: result.loop,
             },
           },
         },
       };
     });
   }
 
   async blobServiceUpload(
     input: {
       +file: File,
       +blobHash: string,
       +encryptionKey: string,
       +dimensions: Dimensions,
       +loop?: boolean,
       +thumbHash?: string,
     },
     options?: ?CallServerEndpointOptions,
   ): Promise<void> {
     const newHolder = uuid.v4();
     const blobHash = toBase64URL(input.blobHash);
 
     // 1. Assign new holder for blob with given blobHash
     let blobAlreadyExists: boolean;
     try {
       const assignHolderEndpoint = blobService.httpEndpoints.ASSIGN_HOLDER;
       const assignHolderResponse = await fetch(
         makeBlobServiceEndpointURL(assignHolderEndpoint),
         {
           method: assignHolderEndpoint.method,
           body: JSON.stringify({
             holder: newHolder,
             blob_hash: blobHash,
           }),
           headers: {
             'content-type': 'application/json',
           },
         },
       );
 
       if (!assignHolderResponse.ok) {
         const { status, statusText } = assignHolderResponse;
         throw new Error(`Server responded with HTTP ${status}: ${statusText}`);
       }
       const { data_exists: dataExistsResponse } =
         await assignHolderResponse.json();
       blobAlreadyExists = dataExistsResponse;
     } catch (e) {
       throw new Error(
         `Failed to assign holder: ${
           getMessageForException(e) ?? 'unknown error'
         }`,
       );
     }
 
     // 2. Upload blob contents if blob doesn't exist
     if (!blobAlreadyExists) {
       const formData = new FormData();
       formData.append('blob_hash', blobHash);
       formData.append('blob_data', input.file);
 
       const xhr = new XMLHttpRequest();
       const uploadEndpoint = blobService.httpEndpoints.UPLOAD_BLOB;
       xhr.open(
         uploadEndpoint.method,
         makeBlobServiceEndpointURL(uploadEndpoint),
       );
       if (options?.timeout) {
         xhr.timeout = options.timeout;
       }
       if (options && options.onProgress) {
         const { onProgress } = options;
         xhr.upload.onprogress = _throttle(
           ({ loaded, total }) => onProgress(loaded / total),
           50,
         );
       }
 
       let failed = false;
       const responsePromise = new Promise((resolve, reject) => {
         xhr.onload = () => {
           if (failed) {
             return;
           }
           resolve();
         };
         xhr.onabort = () => {
           failed = true;
           reject(new Error('request aborted'));
         };
         xhr.onerror = event => {
           failed = true;
           reject(event);
         };
         if (options && options.timeout) {
           xhr.ontimeout = event => {
             failed = true;
             reject(event);
           };
         }
         if (options && options.abortHandler) {
           options.abortHandler(() => {
             failed = true;
             reject(new Error('request aborted'));
             xhr.abort();
           });
         }
       });
 
       if (!failed) {
         xhr.send(formData);
       }
       await responsePromise;
     }
 
     // 3. Send upload metadata to the keyserver, return response
     return await this.props.uploadMediaMetadata({
       ...input.dimensions,
       loop: input.loop ?? false,
       blobHolder: newHolder,
       encryptionKey: input.encryptionKey,
       mimeType: input.file.type,
       filename: input.file.name,
       thumbHash: input.thumbHash,
     });
   }
 
   handleAbortCallback(
     threadID: string,
     localUploadID: string,
     abort: () => void,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been cancelled before we were even handed the
         // abort function. We should immediately abort.
         abort();
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               abort,
             },
           },
         },
       };
     });
   }
 
   handleUploadFailure(threadID: string, localUploadID: string) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload || !upload.abort || upload.serverID) {
         // The upload has been cancelled or completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
               abort: null,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReports(
     partials: $ReadOnlyArray<{
       mediaMission: MediaMission,
       uploadLocalID?: ?string,
       uploadServerID?: ?string,
       messageLocalID?: ?string,
     }>,
   ) {
     const reports = partials.map(
       ({ mediaMission, uploadLocalID, uploadServerID, messageLocalID }) => ({
         type: reportTypes.MEDIA_MISSION,
         time: Date.now(),
         platformDetails: getConfig().platformDetails,
         mediaMission,
         uploadServerID,
         uploadLocalID,
         messageLocalID,
+        id: generateReportID(),
       }),
     );
     this.props.dispatch({ type: queueReportsActionType, payload: { reports } });
   }
 
   cancelPendingUpload(threadID: ?string, localUploadID: string) {
     invariant(threadID, 'threadID should be set in cancelPendingUpload');
 
     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);
           if (isBlobServiceURI(pendingUpload.uri)) {
             const endpoint = blobService.httpEndpoints.DELETE_BLOB;
             const holder = holderFromBlobServiceURI(pendingUpload.uri);
             fetch(makeBlobServiceEndpointURL(endpoint, { holder }), {
               method: endpoint.method,
             });
           }
         }
         const newPendingUploads = _omit([localUploadID])(currentPendingUploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       },
       () => {
         if (revokeURL) {
           URL.revokeObjectURL(revokeURL);
         }
         if (abortRequest) {
           abortRequest();
         }
       },
     );
   }
 
   async sendTextMessage(
     messageInfo: RawTextMessageInfo,
     inputThreadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     if (threadIsPendingSidebar(inputThreadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localID);
     }
 
     if (!threadIsPending(inputThreadInfo.id)) {
       this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(
           messageInfo,
           inputThreadInfo,
           parentThreadInfo,
         ),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let threadInfo = inputThreadInfo;
     const { viewerID } = this.props;
     if (viewerID && inputThreadInfo.type === threadTypes.SIDEBAR) {
       invariant(parentThreadInfo, 'sidebar should have parent');
       threadInfo = patchThreadInfoToIncludeMentionedMembersOfParent(
         inputThreadInfo,
         parentThreadInfo,
         messageInfo.text,
         viewerID,
       );
       if (threadInfo !== inputThreadInfo) {
         this.props.dispatch({
           type: updateNavInfoActionType,
           payload: { pendingThread: threadInfo },
         });
       }
     }
 
     let newThreadID = null;
     try {
       newThreadID = await this.startThreadCreation(threadInfo);
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendTextMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(threadInfo.id);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     const newThreadInfo = {
       ...threadInfo,
       id: newThreadID,
     };
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(
         newMessageInfo,
         newThreadInfo,
         parentThreadInfo,
       ),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ): Promise<SendMessagePayload> {
     try {
       await this.props.textMessageCreationSideEffectsFunc(
         messageInfo,
         threadInfo,
         parentThreadInfo,
       );
       const { localID } = messageInfo;
       invariant(
         localID !== null && localID !== undefined,
         'localID should be set',
       );
       const sidebarCreation =
         this.pendingSidebarCreationMessageLocalIDs.has(localID);
       const result = await this.props.sendTextMessage(
         messageInfo.threadID,
         localID,
         messageInfo.text,
         sidebarCreation,
       );
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       return {
         localID,
         serverID: result.id,
         threadID: messageInfo.threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       throw copy;
     }
   }
 
   // Creates a MultimediaMessage from the unassigned pending uploads,
   // if there are any
   createMultimediaMessage(localID: number, threadInfo: ThreadInfo) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     const localMessageID = `${localIDPrefix}${localID}`;
     this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const currentPendingUploads = prevState.pendingUploads[newThreadID];
       if (!currentPendingUploads) {
         return {};
       }
       const newPendingUploads = {};
       let uploadAssigned = false;
       for (const localUploadID in currentPendingUploads) {
         const upload = currentPendingUploads[localUploadID];
         if (upload.messageID) {
           newPendingUploads[localUploadID] = upload;
         } else {
           const newUpload = {
             ...upload,
             messageID: localMessageID,
           };
           uploadAssigned = true;
           newPendingUploads[localUploadID] = newUpload;
         }
       }
       if (!uploadAssigned) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   setDraft(threadID: ?string, draft: string) {
     invariant(threadID, 'threadID should be set in setDraft');
 
     const newThreadID = this.getRealizedOrPendingThreadID(threadID);
     this.props.dispatch({
       type: 'UPDATE_DRAFT',
       payload: {
         key: draftKeyFromThreadID(newThreadID),
         text: draft,
       },
     });
   }
 
   setTextCursorPosition(threadID: ?string, newPosition: number) {
     invariant(threadID, 'threadID should be set in setTextCursorPosition');
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       return {
         textCursorPositions: {
           ...prevState.textCursorPositions,
           [newThreadID]: newPosition,
         },
       };
     });
   }
 
   setTypeaheadState = (newState: $Shape<TypeaheadState>) => {
     this.setState(prevState => ({
       typeaheadState: {
         ...prevState.typeaheadState,
         ...newState,
       },
     }));
   };
 
   setProgress(
     threadID: string,
     localUploadID: string,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const pendingUploads = prevState.pendingUploads[newThreadID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   messageHasUploadFailure(
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     if (!pendingUploads) {
       return false;
     }
     return pendingUploads.some(upload => upload.failed);
   }
 
   retryMultimediaMessage(
     localMessageID: string,
     threadInfo: ThreadInfo,
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     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);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const completed = InputStateContainer.completedMessageIDs(this.state);
     if (completed.has(localMessageID)) {
       this.sendMultimediaMessage(newRawMessageInfo);
       return;
     }
 
     if (!pendingUploads) {
       return;
     }
 
     // We're not actually starting the send here,
     // we just use this action to update the message's timestamp in Redux
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: newRawMessageInfo,
     });
 
     const uploadIDsToRetry = new Set();
     const uploadsToRetry = [];
     for (const pendingUpload of pendingUploads) {
       const { serverID, messageID, localID, abort } = pendingUpload;
       if (serverID || messageID !== localMessageID) {
         continue;
       }
       if (abort) {
         abort();
       }
       uploadIDsToRetry.add(localID);
       uploadsToRetry.push(pendingUpload);
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const prevPendingUploads = prevState.pendingUploads[newThreadID];
       if (!prevPendingUploads) {
         return {};
       }
       const newPendingUploads = {};
       let pendingUploadChanged = false;
       for (const localID in prevPendingUploads) {
         const pendingUpload = prevPendingUploads[localID];
         if (uploadIDsToRetry.has(localID) && !pendingUpload.serverID) {
           newPendingUploads[localID] = {
             ...pendingUpload,
             failed: false,
             progressPercent: 0,
             abort: null,
           };
           pendingUploadChanged = true;
         } else {
           newPendingUploads[localID] = pendingUpload;
         }
       }
       if (!pendingUploadChanged) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
 
     this.uploadFiles(threadInfo.id, uploadsToRetry);
   }
 
   addReply = (message: string) => {
     this.replyCallbacks.forEach(addReplyCallback => addReplyCallback(message));
   };
 
   addReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks.push(callbackReply);
   };
 
   removeReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks = this.replyCallbacks.filter(
       candidate => candidate !== callbackReply,
     );
   };
 
   render() {
     const { activeChatThreadID } = this.props;
 
     // we're going with two selectors as we want to avoid
     // recreation of chat state setter functions on typeahead state updates
     const inputBaseState = this.inputBaseStateSelector(activeChatThreadID)({
       ...this.state,
       ...this.props,
     });
 
     const typeaheadState = this.typeaheadStateSelector({
       ...this.state,
       ...this.props,
     });
 
     const inputState = this.inputStateSelector({
       inputBaseState,
       typeaheadState,
     });
 
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedInputStateContainer(props) {
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const drafts = useSelector(state => state.draftStore.drafts);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const threadStoreThreadInfos = useSelector(
       state => state.threadStore.threadInfos,
     );
     const pendingToRealizedThreadIDs = useSelector(state =>
       pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
     );
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callUploadMediaMetadata = useServerCall(uploadMediaMetadata);
     const callDeleteUpload = useServerCall(deleteUpload);
     const callSendMultimediaMessage = useServerCall(
       legacySendMultimediaMessage,
     );
     const callSendTextMessage = useServerCall(sendTextMessage);
     const callNewThread = useServerCall(newThread);
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const modalContext = useModalContext();
 
     const [sendCallbacks, setSendCallbacks] = React.useState<
       $ReadOnlyArray<() => mixed>,
     >([]);
     const registerSendCallback = React.useCallback((callback: () => mixed) => {
       setSendCallbacks(prevCallbacks => [...prevCallbacks, callback]);
     }, []);
     const unregisterSendCallback = React.useCallback(
       (callback: () => mixed) => {
         setSendCallbacks(prevCallbacks =>
           prevCallbacks.filter(candidate => candidate !== callback),
         );
       },
       [],
     );
     const textMessageCreationSideEffectsFunc =
       useMessageCreationSideEffectsFunc(messageTypes.TEXT);
 
     return (
       <InputStateContainer
         {...props}
         activeChatThreadID={activeChatThreadID}
         drafts={drafts}
         viewerID={viewerID}
         messageStoreMessages={messageStoreMessages}
         threadStoreThreadInfos={threadStoreThreadInfos}
         pendingRealizedThreadIDs={pendingToRealizedThreadIDs}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         uploadMediaMetadata={callUploadMediaMetadata}
         deleteUpload={callDeleteUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         pushModal={modalContext.pushModal}
         sendCallbacks={sendCallbacks}
         registerSendCallback={registerSendCallback}
         unregisterSendCallback={unregisterSendCallback}
         textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}
       />
     );
   });
 
 export default ConnectedInputStateContainer;