diff --git a/keyserver/src/fetchers/upload-fetchers.js b/keyserver/src/fetchers/upload-fetchers.js
index 29982b2d2..2ec892f15 100644
--- a/keyserver/src/fetchers/upload-fetchers.js
+++ b/keyserver/src/fetchers/upload-fetchers.js
@@ -1,395 +1,407 @@
 // @flow
 
 import ip from 'internal-ip';
 import _keyBy from 'lodash/fp/keyBy.js';
 
 import type { Media, Image, EncryptedImage } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { MediaMessageServerDBContent } from 'lib/types/messages/media.js';
 import { getUploadIDsFromMediaMessageServerDBContents } from 'lib/types/messages/media.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import type {
   ThreadFetchMediaResult,
   ThreadFetchMediaRequest,
 } from 'lib/types/thread-types.js';
 import { makeBlobServiceURI } from 'lib/utils/blob-service.js';
 import { isDev } from 'lib/utils/dev-utils.js';
 import { ServerError } from 'lib/utils/errors.js';
 
 import { dbQuery, SQL } from '../database/database.js';
 import type { Viewer } from '../session/viewer.js';
 import { getAndAssertCommAppURLFacts } from '../utils/urls.js';
 
 type UploadInfo = {
   content: Buffer,
   mime: string,
 };
 async function fetchUpload(
   viewer: Viewer,
   id: string,
   secret: string,
 ): Promise<UploadInfo> {
   const query = SQL`
     SELECT content, mime, extra
     FROM uploads
     WHERE id = ${id} AND secret = ${secret}
   `;
   const [result] = await dbQuery(query);
 
   if (result.length === 0) {
     throw new ServerError('invalid_parameters');
   }
   const [row] = result;
   const { content, mime, extra } = row;
   const { blobHolder } = JSON.parse(extra);
   if (blobHolder) {
     throw new ServerError('resource_unavailable');
   }
   return { content, mime };
 }
 
 async function fetchUploadChunk(
   id: string,
   secret: string,
   pos: number,
   len: number,
 ): Promise<UploadInfo> {
   // We use pos + 1 because SQL is 1-indexed whereas js is 0-indexed
   const query = SQL`
     SELECT SUBSTRING(content, ${pos + 1}, ${len}) AS content, mime, extra
     FROM uploads
     WHERE id = ${id} AND secret = ${secret}
   `;
   const [result] = await dbQuery(query);
 
   if (result.length === 0) {
     throw new ServerError('invalid_parameters');
   }
   const [row] = result;
   const { content, mime, extra } = row;
   if (extra) {
     const { blobHolder } = JSON.parse(extra);
     if (blobHolder) {
       throw new ServerError('resource_unavailable');
     }
   }
   return {
     content,
     mime,
   };
 }
 
 // Returns total size in bytes.
 async function getUploadSize(id: string, secret: string): Promise<number> {
   const query = SQL`
     SELECT LENGTH(content) AS length, extra
     FROM uploads
     WHERE id = ${id} AND secret = ${secret}
   `;
   const [result] = await dbQuery(query);
 
   if (result.length === 0) {
     throw new ServerError('invalid_parameters');
   }
 
   const [row] = result;
   const { length, extra } = row;
   if (extra) {
     const { blobHolder } = JSON.parse(extra);
     if (blobHolder) {
       throw new ServerError('resource_unavailable');
     }
   }
   return length;
 }
 
 function getUploadURL(id: string, secret: string): string {
   const { baseDomain, basePath } = getAndAssertCommAppURLFacts();
   const uploadPath = `${basePath}upload/${id}/${secret}`;
   if (isDev) {
     const ipV4 = ip.v4.sync() || 'localhost';
     const port = parseInt(process.env.PORT, 10) || 3000;
     return `http://${ipV4}:${port}${uploadPath}`;
   }
   return `${baseDomain}${uploadPath}`;
 }
 
 function makeUploadURI(holder: ?string, id: string, secret: string): string {
   if (holder) {
     return makeBlobServiceURI(holder);
   }
   return getUploadURL(id, secret);
 }
 
 function imagesFromRow(row: Object): Image | EncryptedImage {
   const uploadExtra = JSON.parse(row.uploadExtra);
-  const { width, height, blobHolder } = uploadExtra;
+  const { width, height, blobHolder, thumbHash } = uploadExtra;
 
   const { uploadType: type, uploadSecret: secret } = row;
   const id = row.uploadID.toString();
   const dimensions = { width, height };
   const uri = makeUploadURI(blobHolder, id, secret);
   const isEncrypted = !!uploadExtra.encryptionKey;
   if (type !== 'photo') {
     throw new ServerError('invalid_parameters');
   }
   if (!isEncrypted) {
-    return { id, type: 'photo', uri, dimensions };
+    return { id, type: 'photo', uri, dimensions, thumbHash };
   }
   return {
     id,
     type: 'encrypted_photo',
     holder: uri,
     dimensions,
+    thumbHash,
     encryptionKey: uploadExtra.encryptionKey,
   };
 }
 
 async function fetchImages(
   viewer: Viewer,
   mediaIDs: $ReadOnlyArray<string>,
 ): Promise<$ReadOnlyArray<Media>> {
   const query = SQL`
     SELECT id AS uploadID, secret AS uploadSecret,
       type AS uploadType, extra AS uploadExtra
     FROM uploads
     WHERE id IN (${mediaIDs}) AND uploader = ${viewer.id} AND container IS NULL
   `;
   const [result] = await dbQuery(query);
   return result.map(imagesFromRow);
 }
 
 async function fetchMediaForThread(
   viewer: Viewer,
   request: ThreadFetchMediaRequest,
 ): Promise<ThreadFetchMediaResult> {
   const visibleExtractString = `$.${threadPermissions.VISIBLE}.value`;
   const query = SQL`
     SELECT content.photo AS uploadID,
       u.secret AS uploadSecret,
       u.type AS uploadType, u.extra AS uploadExtra,
       u.container, u.creation_time,
       NULL AS thumbnailID,
       NULL AS thumbnailUploadSecret,
       NULL AS thumbnailUploadExtra
     FROM messages m
     LEFT JOIN JSON_TABLE(
       m.content,
       "$[*]" COLUMNS(photo INT PATH "$")
     ) content ON 1
     LEFT JOIN uploads u ON u.id = content.photo
     LEFT JOIN memberships mm ON mm.thread = ${request.threadID} 
       AND mm.user = ${viewer.id}
     WHERE m.thread = ${request.threadID} AND m.type = ${messageTypes.IMAGES}
       AND JSON_EXTRACT(mm.permissions, ${visibleExtractString}) IS TRUE
     UNION SELECT content.media AS uploadID,
       uv.secret AS uploadSecret,
       uv.type AS uploadType, uv.extra AS uploadExtra,
       uv.container, uv.creation_time,
       content.thumbnail AS thumbnailID,
       ut.secret AS thumbnailUploadSecret,
       ut.extra AS thumbnailUploadExtra
     FROM messages m
     LEFT JOIN JSON_TABLE(
       m.content,
       "$[*]" COLUMNS(
         media INT PATH "$.uploadID",
         thumbnail INT PATH "$.thumbnailUploadID"
       )
     ) content ON 1
     LEFT JOIN uploads uv ON uv.id = content.media
     LEFT JOIN uploads ut ON ut.id = content.thumbnail
     LEFT JOIN memberships mm ON mm.thread = ${request.threadID} 
       AND mm.user = ${viewer.id}
     WHERE m.thread = ${request.threadID} 
       AND m.type = ${messageTypes.MULTIMEDIA}
       AND JSON_EXTRACT(mm.permissions, ${visibleExtractString}) IS TRUE
     ORDER BY creation_time DESC
     LIMIT ${request.limit} OFFSET ${request.offset}
   `;
 
   const [uploads] = await dbQuery(query);
 
   const media = uploads.map(upload => {
     const { uploadID, uploadType, uploadSecret, uploadExtra } = upload;
-    const { width, height, encryptionKey, blobHolder } =
+    const { width, height, encryptionKey, blobHolder, thumbHash } =
       JSON.parse(uploadExtra);
     const dimensions = { width, height };
     const uri = makeUploadURI(blobHolder, uploadID, uploadSecret);
 
     if (uploadType === 'photo') {
       if (encryptionKey) {
         return {
           type: 'encrypted_photo',
           id: uploadID.toString(),
           holder: uri,
           encryptionKey,
           dimensions,
+          thumbHash,
         };
       }
       return {
         type: 'photo',
         id: uploadID.toString(),
         uri,
         dimensions,
+        thumbHash,
       };
     }
 
     const { thumbnailID, thumbnailUploadSecret, thumbnailUploadExtra } = upload;
     const {
       encryptionKey: thumbnailEncryptionKey,
       blobHolder: thumbnailBlobHolder,
+      thumbHash: thumbnailThumbHash,
     } = JSON.parse(thumbnailUploadExtra);
     const thumbnailURI = makeUploadURI(
       thumbnailBlobHolder,
       thumbnailID,
       thumbnailUploadSecret,
     );
 
     if (encryptionKey) {
       return {
         type: 'encrypted_video',
         id: uploadID.toString(),
         holder: uri,
         encryptionKey,
         dimensions,
         thumbnailID,
         thumbnailHolder: thumbnailURI,
         thumbnailEncryptionKey,
+        thumbnailThumbHash,
       };
     }
 
     return {
       type: 'video',
       id: uploadID.toString(),
       uri,
       dimensions,
       thumbnailID,
       thumbnailURI,
+      thumbnailThumbHash,
     };
   });
 
   return { media };
 }
 
 async function fetchUploadsForMessage(
   viewer: Viewer,
   mediaMessageContents: $ReadOnlyArray<MediaMessageServerDBContent>,
 ): Promise<$ReadOnlyArray<Object>> {
   const uploadIDs =
     getUploadIDsFromMediaMessageServerDBContents(mediaMessageContents);
   const query = SQL`
     SELECT id AS uploadID, secret AS uploadSecret,
       type AS uploadType, extra AS uploadExtra
     FROM uploads
     WHERE id IN (${uploadIDs}) AND uploader = ${viewer.id} AND container IS NULL
   `;
 
   const [uploads] = await dbQuery(query);
   return uploads;
 }
 
 async function fetchMediaFromMediaMessageContent(
   viewer: Viewer,
   mediaMessageContents: $ReadOnlyArray<MediaMessageServerDBContent>,
 ): Promise<$ReadOnlyArray<Media>> {
   const uploads = await fetchUploadsForMessage(viewer, mediaMessageContents);
 
   return constructMediaFromMediaMessageContentsAndUploadRows(
     mediaMessageContents,
     uploads,
   );
 }
 
 function constructMediaFromMediaMessageContentsAndUploadRows(
   mediaMessageContents: $ReadOnlyArray<MediaMessageServerDBContent>,
   uploadRows: $ReadOnlyArray<Object>,
 ): $ReadOnlyArray<Media> {
   const uploadMap = _keyBy('uploadID')(uploadRows);
 
   const media: Media[] = [];
   for (const mediaMessageContent of mediaMessageContents) {
     const primaryUploadID = mediaMessageContent.uploadID;
     const primaryUpload = uploadMap[primaryUploadID];
 
     const uploadExtra = JSON.parse(primaryUpload.uploadExtra);
-    const { width, height, loop, blobHolder, encryptionKey } = uploadExtra;
+    const { width, height, loop, blobHolder, encryptionKey, thumbHash } =
+      uploadExtra;
     const dimensions = { width, height };
 
     const primaryUploadURI = makeUploadURI(
       blobHolder,
       primaryUploadID,
       primaryUpload.uploadSecret,
     );
 
     if (mediaMessageContent.type === 'photo') {
       if (encryptionKey) {
         media.push({
           type: 'encrypted_photo',
           id: primaryUploadID,
           holder: primaryUploadURI,
           encryptionKey,
           dimensions,
+          thumbHash,
         });
       } else {
         media.push({
           type: 'photo',
           id: primaryUploadID,
           uri: primaryUploadURI,
           dimensions,
+          thumbHash,
         });
       }
       continue;
     }
 
     const thumbnailUploadID = mediaMessageContent.thumbnailUploadID;
     const thumbnailUpload = uploadMap[thumbnailUploadID];
 
     const thumbnailUploadExtra = JSON.parse(thumbnailUpload.uploadExtra);
-    const { blobHolder: thumbnailBlobHolder } = thumbnailUploadExtra;
+    const { blobHolder: thumbnailBlobHolder, thumbHash: thumbnailThumbHash } =
+      thumbnailUploadExtra;
     const thumbnailUploadURI = makeUploadURI(
       thumbnailBlobHolder,
       thumbnailUploadID,
       thumbnailUpload.uploadSecret,
     );
 
     if (encryptionKey) {
       const video = {
         type: 'encrypted_video',
         id: primaryUploadID,
         holder: primaryUploadURI,
         encryptionKey,
         dimensions,
         thumbnailID: thumbnailUploadID,
         thumbnailHolder: thumbnailUploadURI,
         thumbnailEncryptionKey: thumbnailUploadExtra.encryptionKey,
+        thumbnailThumbHash,
       };
       media.push(loop ? { ...video, loop } : video);
     } else {
       const video = {
         type: 'video',
         id: primaryUploadID,
         uri: primaryUploadURI,
         dimensions,
         thumbnailID: thumbnailUploadID,
         thumbnailURI: thumbnailUploadURI,
+        thumbnailThumbHash,
       };
       media.push(loop ? { ...video, loop } : video);
     }
   }
 
   return media;
 }
 
 export {
   fetchUpload,
   fetchUploadChunk,
   getUploadSize,
   getUploadURL,
   makeUploadURI,
   imagesFromRow,
   fetchImages,
   fetchMediaForThread,
   fetchMediaFromMediaMessageContent,
   constructMediaFromMediaMessageContentsAndUploadRows,
 };
diff --git a/lib/reducers/message-reducer.js b/lib/reducers/message-reducer.js
index a8af11d8a..70e1a182e 100644
--- a/lib/reducers/message-reducer.js
+++ b/lib/reducers/message-reducer.js
@@ -1,1777 +1,1778 @@
 // @flow
 
 import invariant from 'invariant';
 import _difference from 'lodash/fp/difference.js';
 import _flow from 'lodash/fp/flow.js';
 import _isEqual from 'lodash/fp/isEqual.js';
 import _keyBy from 'lodash/fp/keyBy.js';
 import _map from 'lodash/fp/map.js';
 import _mapKeys from 'lodash/fp/mapKeys.js';
 import _mapValues from 'lodash/fp/mapValues.js';
 import _omit from 'lodash/fp/omit.js';
 import _omitBy from 'lodash/fp/omitBy.js';
 import _pick from 'lodash/fp/pick.js';
 import _pickBy from 'lodash/fp/pickBy.js';
 import _uniq from 'lodash/fp/uniq.js';
 
 import { setClientDBStoreActionType } from '../actions/client-db-store-actions.js';
 import {
   createEntryActionTypes,
   saveEntryActionTypes,
   deleteEntryActionTypes,
   restoreEntryActionTypes,
 } from '../actions/entry-actions.js';
 import {
   fetchMessagesBeforeCursorActionTypes,
   fetchMostRecentMessagesActionTypes,
   sendTextMessageActionTypes,
   sendMultimediaMessageActionTypes,
   sendReactionMessageActionTypes,
   sendEditMessageActionTypes,
   saveMessagesActionType,
   processMessagesActionType,
   messageStorePruneActionType,
   createLocalMessageActionType,
   fetchSingleMostRecentMessagesFromThreadsActionTypes,
 } from '../actions/message-actions.js';
 import { sendMessageReportActionTypes } from '../actions/message-report-actions.js';
 import { siweAuthActionTypes } from '../actions/siwe-actions.js';
 import {
   changeThreadSettingsActionTypes,
   deleteThreadActionTypes,
   leaveThreadActionTypes,
   newThreadActionTypes,
   removeUsersFromThreadActionTypes,
   changeThreadMemberRolesActionTypes,
   joinThreadActionTypes,
   toggleMessagePinActionTypes,
 } from '../actions/thread-actions.js';
 import { updateMultimediaMessageMediaActionType } from '../actions/upload-actions.js';
 import {
   logOutActionTypes,
   deleteAccountActionTypes,
   logInActionTypes,
   registerActionTypes,
 } from '../actions/user-actions.js';
 import { pendingToRealizedThreadIDsSelector } from '../selectors/thread-selectors.js';
 import {
   messageID,
   combineTruncationStatuses,
   sortMessageInfoList,
   sortMessageIDs,
   mergeThreadMessageInfos,
 } from '../shared/message-utils.js';
 import {
   threadHasPermission,
   threadInChatList,
   threadIsPending,
 } from '../shared/thread-utils.js';
 import threadWatcher from '../shared/thread-watcher.js';
 import { unshimMessageInfos } from '../shared/unshim-utils.js';
 import type { Media, Image } from '../types/media-types.js';
 import { messageTypes } from '../types/message-types-enum.js';
 import {
   type RawMessageInfo,
   type LocalMessageInfo,
   type MessageStore,
   type ReplaceMessageOperation,
   type MessageStoreOperation,
   type MessageTruncationStatus,
   type MessageTruncationStatuses,
   messageTruncationStatus,
   defaultNumberPerThread,
   type ThreadMessageInfo,
 } from '../types/message-types.js';
 import type { RawImagesMessageInfo } from '../types/messages/images.js';
 import type { RawMediaMessageInfo } from '../types/messages/media.js';
 import { type BaseAction } from '../types/redux-types.js';
 import { processServerRequestsActionType } from '../types/request-types.js';
 import {
   fullStateSyncActionType,
   incrementalStateSyncActionType,
 } from '../types/socket-types.js';
 import { threadPermissions } from '../types/thread-permission-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 { setNewSessionActionType } from '../utils/action-utils.js';
 import { isDev } from '../utils/dev-utils.js';
 import {
   translateClientDBMessageInfosToRawMessageInfos,
   translateClientDBThreadMessageInfos,
 } from '../utils/message-ops-utils.js';
 import { assertObjectsAreEqual } from '../utils/objects.js';
 
 const PROCESSED_MSG_STORE_INVARIANTS_DISABLED = !isDev;
 const _mapValuesWithKeys = _mapValues.convert({ cap: false });
 
 // Input must already be ordered!
 function mapThreadsToMessageIDsFromOrderedMessageInfos(
   orderedMessageInfos: $ReadOnlyArray<RawMessageInfo>,
 ): { [threadID: string]: string[] } {
   const threadsToMessageIDs: { [threadID: string]: string[] } = {};
   for (const messageInfo of orderedMessageInfos) {
     const key = messageID(messageInfo);
     if (!threadsToMessageIDs[messageInfo.threadID]) {
       threadsToMessageIDs[messageInfo.threadID] = [key];
     } else {
       threadsToMessageIDs[messageInfo.threadID].push(key);
     }
   }
   return threadsToMessageIDs;
 }
 
 function isThreadWatched(
   threadID: string,
   threadInfo: ?RawThreadInfo,
   watchedIDs: $ReadOnlyArray<string>,
 ) {
   return (
     threadIsPending(threadID) ||
     (threadInfo &&
       threadHasPermission(threadInfo, threadPermissions.VISIBLE) &&
       (threadInChatList(threadInfo) || watchedIDs.includes(threadID)))
   );
 }
 
 function assertMessageStoreThreadsAreEqual(
   processedMessageStore: MessageStore,
   expectedMessageStore: MessageStore,
   location: string,
 ) {
   if (PROCESSED_MSG_STORE_INVARIANTS_DISABLED) {
     return;
   }
 
   assertObjectsAreEqual(
     processedMessageStore.threads,
     expectedMessageStore.threads,
     `MessageStore.threads - ${location}`,
   );
 }
 
 const newThread = () => ({
   messageIDs: [],
   startReached: false,
   lastNavigatedTo: 0,
   lastPruned: Date.now(),
 });
 
 type FreshMessageStoreResult = {
   +messageStoreOperations: $ReadOnlyArray<MessageStoreOperation>,
   +messageStore: MessageStore,
 };
 function freshMessageStore(
   messageInfos: $ReadOnlyArray<RawMessageInfo>,
   truncationStatus: { [threadID: string]: MessageTruncationStatus },
   currentAsOf: number,
   threadInfos: { +[threadID: string]: RawThreadInfo },
 ): FreshMessageStoreResult {
   const unshimmed = unshimMessageInfos(messageInfos);
   const orderedMessageInfos = sortMessageInfoList(unshimmed);
   const messages = _keyBy(messageID)(orderedMessageInfos);
 
   const messageStoreReplaceOperations = orderedMessageInfos.map(
     messageInfo => ({
       type: 'replace',
       payload: { id: messageID(messageInfo), messageInfo },
     }),
   );
 
   const threadsToMessageIDs =
     mapThreadsToMessageIDsFromOrderedMessageInfos(orderedMessageInfos);
   const threads = _mapValuesWithKeys(
     (messageIDs: string[], threadID: string) => ({
       ...newThread(),
       messageIDs,
       startReached:
         truncationStatus[threadID] === messageTruncationStatus.EXHAUSTIVE,
     }),
   )(threadsToMessageIDs);
   const watchedIDs = threadWatcher.getWatchedIDs();
   for (const threadID in threadInfos) {
     const threadInfo = threadInfos[threadID];
     if (
       threads[threadID] ||
       !isThreadWatched(threadID, threadInfo, watchedIDs)
     ) {
       continue;
     }
     threads[threadID] = newThread();
   }
 
   const messageStoreOperations = [
     { type: 'remove_all' },
     {
       type: 'remove_all_threads',
     },
     {
       type: 'replace_threads',
       payload: { threads },
     },
     ...messageStoreReplaceOperations,
   ];
 
   return {
     messageStoreOperations,
     messageStore: { messages, threads, local: {}, currentAsOf },
   };
 }
 
 type ReassignmentResult = {
   +messageStoreOperations: MessageStoreOperation[],
   +messageStore: MessageStore,
   +reassignedThreadIDs: string[],
 };
 
 function reassignMessagesToRealizedThreads(
   messageStore: MessageStore,
   threadInfos: { +[threadID: string]: RawThreadInfo },
 ): ReassignmentResult {
   const pendingToRealizedThreadIDs =
     pendingToRealizedThreadIDsSelector(threadInfos);
 
   const messageStoreOperations: MessageStoreOperation[] = [];
   const messages = {};
   for (const storeMessageID in messageStore.messages) {
     const message = messageStore.messages[storeMessageID];
     const newThreadID = pendingToRealizedThreadIDs.get(message.threadID);
 
     messages[storeMessageID] = newThreadID
       ? {
           ...message,
           threadID: newThreadID,
           time: threadInfos[newThreadID]?.creationTime ?? message.time,
         }
       : message;
 
     if (!newThreadID) {
       continue;
     }
 
     const updateMsgOperation: ReplaceMessageOperation = {
       type: 'replace',
       payload: { id: storeMessageID, messageInfo: messages[storeMessageID] },
     };
 
     messageStoreOperations.push(updateMsgOperation);
   }
 
   const threads = {};
   const reassignedThreadIDs = [];
   const updatedThreads = {};
   const threadsToRemove = [];
   for (const threadID in messageStore.threads) {
     const threadMessageInfo = messageStore.threads[threadID];
     const newThreadID = pendingToRealizedThreadIDs.get(threadID);
     if (!newThreadID) {
       threads[threadID] = threadMessageInfo;
       continue;
     }
     const realizedThread = messageStore.threads[newThreadID];
     if (!realizedThread) {
       reassignedThreadIDs.push(newThreadID);
       threads[newThreadID] = threadMessageInfo;
       updatedThreads[newThreadID] = threadMessageInfo;
       threadsToRemove.push(threadID);
       continue;
     }
     threads[newThreadID] = mergeThreadMessageInfos(
       threadMessageInfo,
       realizedThread,
       messages,
     );
     updatedThreads[newThreadID] = threads[newThreadID];
   }
   if (threadsToRemove.length) {
     messageStoreOperations.push({
       type: 'remove_threads',
       payload: {
         ids: threadsToRemove,
       },
     });
   }
   messageStoreOperations.push({
     type: 'replace_threads',
     payload: {
       threads: updatedThreads,
     },
   });
 
   return {
     messageStoreOperations,
     messageStore: {
       ...messageStore,
       threads,
       messages,
     },
     reassignedThreadIDs,
   };
 }
 
 type MergeNewMessagesResult = {
   +messageStoreOperations: $ReadOnlyArray<MessageStoreOperation>,
   +messageStore: MessageStore,
 };
 // oldMessageStore is from the old state
 // newMessageInfos, truncationStatus come from server
 function mergeNewMessages(
   oldMessageStore: MessageStore,
   newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   truncationStatus: { [threadID: string]: MessageTruncationStatus },
   threadInfos: { +[threadID: string]: RawThreadInfo },
   actionType: string,
 ): MergeNewMessagesResult {
   const {
     messageStoreOperations: updateWithLatestThreadInfosOps,
     messageStore: messageStoreUpdatedWithLatestThreadInfos,
     reassignedThreadIDs,
   } = updateMessageStoreWithLatestThreadInfos(oldMessageStore, threadInfos);
 
   const messageStoreAfterUpdateOps = processMessageStoreOperations(
     oldMessageStore,
     updateWithLatestThreadInfosOps,
   );
 
   assertMessageStoreThreadsAreEqual(
     messageStoreAfterUpdateOps,
     messageStoreUpdatedWithLatestThreadInfos,
     `${actionType} | reassignment and filtering`,
   );
 
   const updatedMessageStore = {
     ...messageStoreUpdatedWithLatestThreadInfos,
     messages: messageStoreAfterUpdateOps.messages,
   };
 
   const localIDsToServerIDs: Map<string, string> = new Map();
 
   const watchedThreadIDs = [
     ...threadWatcher.getWatchedIDs(),
     ...reassignedThreadIDs,
   ];
   const unshimmedNewMessages = unshimMessageInfos(newMessageInfos);
   const unshimmedNewMessagesOfWatchedThreads = unshimmedNewMessages.filter(
     msg =>
       isThreadWatched(
         msg.threadID,
         threadInfos[msg.threadID],
         watchedThreadIDs,
       ),
   );
   const orderedNewMessageInfos = _flow(
     _map((messageInfo: RawMessageInfo) => {
       const { id: inputID } = messageInfo;
       invariant(inputID, 'new messageInfos should have serverID');
       invariant(
         !threadIsPending(messageInfo.threadID),
         'new messageInfos should have realized thread id',
       );
       const currentMessageInfo = updatedMessageStore.messages[inputID];
       if (
         messageInfo.type === messageTypes.TEXT ||
         messageInfo.type === messageTypes.IMAGES ||
         messageInfo.type === messageTypes.MULTIMEDIA
       ) {
         const { localID: inputLocalID } = messageInfo;
         const currentLocalMessageInfo = inputLocalID
           ? updatedMessageStore.messages[inputLocalID]
           : null;
         if (currentMessageInfo && currentMessageInfo.localID) {
           // If the client already has a RawMessageInfo with this serverID, keep
           // any localID associated with the existing one. This is because we
           // use localIDs as React keys and changing React keys leads to loss of
           // component state. (The conditional below is for Flow)
           if (messageInfo.type === messageTypes.TEXT) {
             messageInfo = {
               ...messageInfo,
               localID: currentMessageInfo.localID,
             };
           } else if (messageInfo.type === messageTypes.MULTIMEDIA) {
             messageInfo = ({
               ...messageInfo,
               localID: currentMessageInfo.localID,
             }: RawMediaMessageInfo);
           } else {
             messageInfo = ({
               ...messageInfo,
               localID: currentMessageInfo.localID,
             }: RawImagesMessageInfo);
           }
         } else if (currentLocalMessageInfo && currentLocalMessageInfo.localID) {
           // If the client has a RawMessageInfo with this localID, but not with
           // the serverID, that means the message creation succeeded but the
           // success action never got processed. We set a key in
           // localIDsToServerIDs here to fix the messageIDs for the rest of the
           // MessageStore too. (The conditional below is for Flow)
           invariant(inputLocalID, 'inputLocalID should be set');
           localIDsToServerIDs.set(inputLocalID, inputID);
           if (messageInfo.type === messageTypes.TEXT) {
             messageInfo = {
               ...messageInfo,
               localID: currentLocalMessageInfo.localID,
             };
           } else if (messageInfo.type === messageTypes.MULTIMEDIA) {
             messageInfo = ({
               ...messageInfo,
               localID: currentLocalMessageInfo.localID,
             }: RawMediaMessageInfo);
           } else {
             messageInfo = ({
               ...messageInfo,
               localID: currentLocalMessageInfo.localID,
             }: RawImagesMessageInfo);
           }
         } else {
           // If neither the serverID nor the localID from the delivered
           // RawMessageInfo exists in the client store, then this message is
           // brand new to us. Ignore any localID provided by the server.
           // (The conditional below is for Flow)
           const { localID, ...rest } = messageInfo;
           if (rest.type === messageTypes.TEXT) {
             messageInfo = { ...rest };
           } else if (rest.type === messageTypes.MULTIMEDIA) {
             messageInfo = ({ ...rest }: RawMediaMessageInfo);
           } else {
             messageInfo = ({ ...rest }: RawImagesMessageInfo);
           }
         }
       } else if (
         currentMessageInfo &&
         messageInfo.time > currentMessageInfo.time
       ) {
         // When thick threads will be introduced it will be possible for two
         // clients to create the same message (e.g. when they create the same
         // sidebar at the same time). We're going to use deterministic ids for
         // messages which should be unique within a thread and we have to find
         // a way for clients to agree which message to keep. We can't rely on
         // always choosing incoming messages nor messages from the store,
         // because a message that is in one user's store, will be send to
         // another user. One way to deal with it is to always choose a message
         // which is older, according to its timestamp. We can use this strategy
         // only for messages that can start a thread, because for other types
         // it might break the "contiguous" property of message ids (we can
         // consider selecting younger messages in that case, but for now we use
         // an invariant).
         invariant(
           messageInfo.type === messageTypes.CREATE_SIDEBAR ||
             messageInfo.type === messageTypes.CREATE_THREAD ||
             messageInfo.type === messageTypes.SIDEBAR_SOURCE,
           `Two different messages of type ${messageInfo.type} with the same ` +
             'id found',
         );
         return currentMessageInfo;
       }
       return _isEqual(messageInfo)(currentMessageInfo)
         ? currentMessageInfo
         : messageInfo;
     }),
     sortMessageInfoList,
   )(unshimmedNewMessagesOfWatchedThreads);
 
   const newMessageOps: MessageStoreOperation[] = [];
   const threadsToMessageIDs = mapThreadsToMessageIDsFromOrderedMessageInfos(
     orderedNewMessageInfos,
   );
   const oldMessageInfosToCombine = [];
   const threadsThatNeedMessageIDsResorted = [];
   const local = {};
   const updatedThreads = {};
   const threads = _flow(
     _mapValuesWithKeys((messageIDs: string[], threadID: string) => {
       const oldThread = updatedMessageStore.threads[threadID];
       const truncate = truncationStatus[threadID];
       if (!oldThread) {
         updatedThreads[threadID] = {
           ...newThread(),
           messageIDs,
           startReached: truncate === messageTruncationStatus.EXHAUSTIVE,
         };
         return updatedThreads[threadID];
       }
       let oldMessageIDsUnchanged = true;
       const oldMessageIDs = oldThread.messageIDs.map(oldID => {
         const newID = localIDsToServerIDs.get(oldID);
         if (newID !== null && newID !== undefined) {
           oldMessageIDsUnchanged = false;
           return newID;
         }
         return oldID;
       });
       if (truncate === messageTruncationStatus.TRUNCATED) {
         // If the result set in the payload isn't contiguous with what we have
         // now, that means we need to dump what we have in the state and replace
         // it with the result set. We do this to achieve our two goals for the
         // messageStore: currentness and contiguousness.
         newMessageOps.push({
           type: 'remove_messages_for_threads',
           payload: { threadIDs: [threadID] },
         });
         updatedThreads[threadID] = {
           messageIDs,
           startReached: false,
           lastNavigatedTo: oldThread.lastNavigatedTo,
           lastPruned: oldThread.lastPruned,
         };
         return updatedThreads[threadID];
       }
       const oldNotInNew = _difference(oldMessageIDs)(messageIDs);
       for (const id of oldNotInNew) {
         const oldMessageInfo = updatedMessageStore.messages[id];
         invariant(oldMessageInfo, `could not find ${id} in messageStore`);
         oldMessageInfosToCombine.push(oldMessageInfo);
         const localInfo = updatedMessageStore.local[id];
         if (localInfo) {
           local[id] = localInfo;
         }
       }
       const startReached =
         oldThread.startReached ||
         truncate === messageTruncationStatus.EXHAUSTIVE;
       if (_difference(messageIDs)(oldMessageIDs).length === 0) {
         if (startReached === oldThread.startReached && oldMessageIDsUnchanged) {
           return oldThread;
         }
         updatedThreads[threadID] = {
           messageIDs: oldMessageIDs,
           startReached,
           lastNavigatedTo: oldThread.lastNavigatedTo,
           lastPruned: oldThread.lastPruned,
         };
         return updatedThreads[threadID];
       }
       const mergedMessageIDs = [...messageIDs, ...oldNotInNew];
       threadsThatNeedMessageIDsResorted.push(threadID);
       return {
         messageIDs: mergedMessageIDs,
         startReached,
         lastNavigatedTo: oldThread.lastNavigatedTo,
         lastPruned: oldThread.lastPruned,
       };
     }),
     _pickBy(thread => !!thread),
   )(threadsToMessageIDs);
 
   for (const threadID in updatedMessageStore.threads) {
     if (threads[threadID]) {
       continue;
     }
     let thread = updatedMessageStore.threads[threadID];
     const truncate = truncationStatus[threadID];
     if (truncate === messageTruncationStatus.EXHAUSTIVE) {
       thread = {
         ...thread,
         startReached: true,
       };
     }
     threads[threadID] = thread;
     updatedThreads[threadID] = thread;
 
     for (const id of thread.messageIDs) {
       const messageInfo = updatedMessageStore.messages[id];
       if (messageInfo) {
         oldMessageInfosToCombine.push(messageInfo);
       }
       const localInfo = updatedMessageStore.local[id];
       if (localInfo) {
         local[id] = localInfo;
       }
     }
   }
 
   const messages = _flow(
     sortMessageInfoList,
     _keyBy(messageID),
   )([...orderedNewMessageInfos, ...oldMessageInfosToCombine]);
 
   const newMessages = _keyBy(messageID)(orderedNewMessageInfos);
   for (const id in newMessages) {
     newMessageOps.push({
       type: 'replace',
       payload: { id, messageInfo: newMessages[id] },
     });
   }
 
   if (localIDsToServerIDs.size > 0) {
     newMessageOps.push({
       type: 'remove',
       payload: { ids: [...localIDsToServerIDs.keys()] },
     });
   }
 
   for (const threadID of threadsThatNeedMessageIDsResorted) {
     threads[threadID].messageIDs = sortMessageIDs(messages)(
       threads[threadID].messageIDs,
     );
     updatedThreads[threadID] = threads[threadID];
   }
 
   const currentAsOf = Math.max(
     orderedNewMessageInfos.length > 0 ? orderedNewMessageInfos[0].time : 0,
     updatedMessageStore.currentAsOf,
   );
 
   newMessageOps.push({
     type: 'replace_threads',
     payload: {
       threads: updatedThreads,
     },
   });
 
   const processedMessageStore = processMessageStoreOperations(
     updatedMessageStore,
     newMessageOps,
   );
 
   const messageStore = {
     messages: processedMessageStore.messages,
     threads,
     local,
     currentAsOf,
   };
 
   assertMessageStoreThreadsAreEqual(
     processedMessageStore,
     messageStore,
     `${actionType} | processed`,
   );
 
   return {
     messageStoreOperations: [
       ...updateWithLatestThreadInfosOps,
       ...newMessageOps,
     ],
     messageStore,
   };
 }
 
 type UpdateMessageStoreWithLatestThreadInfosResult = {
   +messageStoreOperations: MessageStoreOperation[],
   +messageStore: MessageStore,
   +reassignedThreadIDs: string[],
 };
 function updateMessageStoreWithLatestThreadInfos(
   messageStore: MessageStore,
   threadInfos: { +[id: string]: RawThreadInfo },
 ): UpdateMessageStoreWithLatestThreadInfosResult {
   const messageStoreOperations: MessageStoreOperation[] = [];
   const {
     messageStore: reassignedMessageStore,
     messageStoreOperations: reassignMessagesOps,
     reassignedThreadIDs,
   } = reassignMessagesToRealizedThreads(messageStore, threadInfos);
   messageStoreOperations.push(...reassignMessagesOps);
   const watchedIDs = [...threadWatcher.getWatchedIDs(), ...reassignedThreadIDs];
   const watchedThreadInfos = _pickBy((threadInfo: RawThreadInfo) =>
     isThreadWatched(threadInfo.id, threadInfo, watchedIDs),
   )(threadInfos);
 
   const filteredThreads = _pick(Object.keys(watchedThreadInfos))(
     reassignedMessageStore.threads,
   );
 
   const messageIDsToRemove = [];
   const threadsToRemoveMessagesFrom = [];
   for (const threadID in reassignedMessageStore.threads) {
     if (watchedThreadInfos[threadID]) {
       continue;
     }
     threadsToRemoveMessagesFrom.push(threadID);
     for (const id of reassignedMessageStore.threads[threadID].messageIDs) {
       messageIDsToRemove.push(id);
     }
   }
 
   const updatedThreads = {};
   for (const threadID in threadInfos) {
     const threadInfo = threadInfos[threadID];
     if (
       isThreadWatched(threadID, threadInfo, watchedIDs) &&
       !filteredThreads[threadID]
     ) {
       filteredThreads[threadID] = newThread();
       updatedThreads[threadID] = filteredThreads[threadID];
     }
   }
 
   messageStoreOperations.push({
     type: 'remove_threads',
     payload: { ids: threadsToRemoveMessagesFrom },
   });
 
   messageStoreOperations.push({
     type: 'replace_threads',
     payload: {
       threads: updatedThreads,
     },
   });
 
   messageStoreOperations.push({
     type: 'remove_messages_for_threads',
     payload: { threadIDs: threadsToRemoveMessagesFrom },
   });
 
   return {
     messageStoreOperations,
     messageStore: {
       messages: _omit(messageIDsToRemove)(reassignedMessageStore.messages),
       threads: filteredThreads,
       local: _omit(messageIDsToRemove)(reassignedMessageStore.local),
       currentAsOf: reassignedMessageStore.currentAsOf,
     },
     reassignedThreadIDs,
   };
 }
 
 function ensureRealizedThreadIDIsUsedWhenPossible<T: RawMessageInfo>(
   payload: T,
   threadInfos: { +[id: string]: RawThreadInfo },
 ): T {
   const pendingToRealizedThreadIDs =
     pendingToRealizedThreadIDsSelector(threadInfos);
   const realizedThreadID = pendingToRealizedThreadIDs.get(payload.threadID);
   return realizedThreadID
     ? { ...payload, threadID: realizedThreadID }
     : payload;
 }
 
 function processMessageStoreOperations(
   messageStore: MessageStore,
   messageStoreOperations: $ReadOnlyArray<MessageStoreOperation>,
 ): MessageStore {
   if (messageStoreOperations.length === 0) {
     return messageStore;
   }
   let processedMessages = { ...messageStore.messages };
   let processedThreads = { ...messageStore.threads };
   for (const operation of messageStoreOperations) {
     if (operation.type === 'replace') {
       processedMessages[operation.payload.id] = operation.payload.messageInfo;
     } else if (operation.type === 'remove') {
       for (const id of operation.payload.ids) {
         delete processedMessages[id];
       }
     } else if (operation.type === 'remove_messages_for_threads') {
       for (const msgID in processedMessages) {
         if (
           operation.payload.threadIDs.includes(
             processedMessages[msgID].threadID,
           )
         ) {
           delete processedMessages[msgID];
         }
       }
     } else if (operation.type === 'rekey') {
       processedMessages[operation.payload.to] =
         processedMessages[operation.payload.from];
       delete processedMessages[operation.payload.from];
     } else if (operation.type === 'remove_all') {
       processedMessages = {};
     } else if (operation.type === 'replace_threads') {
       for (const threadID in operation.payload.threads) {
         processedThreads[threadID] = operation.payload.threads[threadID];
       }
     } else if (operation.type === 'remove_threads') {
       for (const id of operation.payload.ids) {
         delete processedThreads[id];
       }
     } else if (operation.type === 'remove_all_threads') {
       processedThreads = {};
     }
   }
   return {
     ...messageStore,
     threads: processedThreads,
     messages: processedMessages,
   };
 }
 
 type ReduceMessageStoreResult = {
   +messageStoreOperations: $ReadOnlyArray<MessageStoreOperation>,
   +messageStore: MessageStore,
 };
 function reduceMessageStore(
   messageStore: MessageStore,
   action: BaseAction,
   newThreadInfos: { +[id: string]: RawThreadInfo },
 ): ReduceMessageStoreResult {
   if (
     action.type === logInActionTypes.success ||
     action.type === siweAuthActionTypes.success
   ) {
     const messagesResult = action.payload.messagesResult;
     const { messageStoreOperations, messageStore: freshStore } =
       freshMessageStore(
         messagesResult.messageInfos,
         messagesResult.truncationStatus,
         messagesResult.currentAsOf,
         newThreadInfos,
       );
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       freshStore,
       `${action.type} | fresh store`,
     );
 
     return {
       messageStoreOperations,
       messageStore: { ...freshStore, messages: processedMessageStore.messages },
     };
   } else if (action.type === incrementalStateSyncActionType) {
     if (
       action.payload.messagesResult.rawMessageInfos.length === 0 &&
       action.payload.updatesResult.newUpdates.length === 0
     ) {
       return { messageStoreOperations: [], messageStore };
     }
 
     const messagesResult = mergeUpdatesWithMessageInfos(
       action.payload.messagesResult.rawMessageInfos,
       action.payload.updatesResult.newUpdates,
       action.payload.messagesResult.truncationStatuses,
     );
 
     return mergeNewMessages(
       messageStore,
       messagesResult.rawMessageInfos,
       messagesResult.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (action.type === processUpdatesActionType) {
     if (action.payload.updatesResult.newUpdates.length === 0) {
       return { messageStoreOperations: [], messageStore };
     }
 
     const messagesResult = mergeUpdatesWithMessageInfos(
       [],
       action.payload.updatesResult.newUpdates,
     );
 
     const { messageStoreOperations, messageStore: newMessageStore } =
       mergeNewMessages(
         messageStore,
         messagesResult.rawMessageInfos,
         messagesResult.truncationStatuses,
         newThreadInfos,
         action.type,
       );
     return {
       messageStoreOperations,
       messageStore: {
         messages: newMessageStore.messages,
         threads: newMessageStore.threads,
         local: newMessageStore.local,
         currentAsOf: messageStore.currentAsOf,
       },
     };
   } else if (
     action.type === fullStateSyncActionType ||
     action.type === processMessagesActionType
   ) {
     const { messagesResult } = action.payload;
     return mergeNewMessages(
       messageStore,
       messagesResult.rawMessageInfos,
       messagesResult.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === fetchSingleMostRecentMessagesFromThreadsActionTypes.success
   ) {
     return mergeNewMessages(
       messageStore,
       action.payload.rawMessageInfos,
       action.payload.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === fetchMessagesBeforeCursorActionTypes.success ||
     action.type === fetchMostRecentMessagesActionTypes.success
   ) {
     return mergeNewMessages(
       messageStore,
       action.payload.rawMessageInfos,
       { [action.payload.threadID]: action.payload.truncationStatus },
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === logOutActionTypes.success ||
     action.type === deleteAccountActionTypes.success ||
     action.type === deleteThreadActionTypes.success ||
     action.type === leaveThreadActionTypes.success ||
     action.type === setNewSessionActionType
   ) {
     const { messageStoreOperations, messageStore: filteredMessageStore } =
       updateMessageStoreWithLatestThreadInfos(messageStore, newThreadInfos);
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       filteredMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: {
         ...filteredMessageStore,
         messages: processedMessageStore.messages,
       },
     };
   } else if (action.type === newThreadActionTypes.success) {
     const messagesResult = mergeUpdatesWithMessageInfos(
       action.payload.newMessageInfos,
       action.payload.updatesResult.newUpdates,
     );
     return mergeNewMessages(
       messageStore,
       messagesResult.rawMessageInfos,
       messagesResult.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (action.type === sendMessageReportActionTypes.success) {
     return mergeNewMessages(
       messageStore,
       [action.payload.messageInfo],
       {
         [action.payload.messageInfo.threadID]:
           messageTruncationStatus.UNCHANGED,
       },
       newThreadInfos,
       action.type,
     );
   } else if (action.type === registerActionTypes.success) {
     const truncationStatuses = {};
     for (const messageInfo of action.payload.rawMessageInfos) {
       truncationStatuses[messageInfo.threadID] =
         messageTruncationStatus.EXHAUSTIVE;
     }
     return mergeNewMessages(
       messageStore,
       action.payload.rawMessageInfos,
       truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === changeThreadSettingsActionTypes.success ||
     action.type === removeUsersFromThreadActionTypes.success ||
     action.type === changeThreadMemberRolesActionTypes.success ||
     action.type === createEntryActionTypes.success ||
     action.type === saveEntryActionTypes.success ||
     action.type === restoreEntryActionTypes.success ||
     action.type === toggleMessagePinActionTypes.success
   ) {
     return mergeNewMessages(
       messageStore,
       action.payload.newMessageInfos,
       { [action.payload.threadID]: messageTruncationStatus.UNCHANGED },
       newThreadInfos,
       action.type,
     );
   } else if (action.type === deleteEntryActionTypes.success) {
     const payload = action.payload;
     if (payload) {
       return mergeNewMessages(
         messageStore,
         payload.newMessageInfos,
         { [payload.threadID]: messageTruncationStatus.UNCHANGED },
         newThreadInfos,
         action.type,
       );
     }
   } else if (action.type === joinThreadActionTypes.success) {
     const messagesResult = mergeUpdatesWithMessageInfos(
       action.payload.rawMessageInfos,
       action.payload.updatesResult.newUpdates,
     );
     return mergeNewMessages(
       messageStore,
       messagesResult.rawMessageInfos,
       messagesResult.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (action.type === sendEditMessageActionTypes.success) {
     const { newMessageInfos } = action.payload;
     const truncationStatuses = {};
     for (const messageInfo of newMessageInfos) {
       truncationStatuses[messageInfo.threadID] =
         messageTruncationStatus.UNCHANGED;
     }
     return mergeNewMessages(
       messageStore,
       newMessageInfos,
       truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === sendTextMessageActionTypes.started ||
     action.type === sendMultimediaMessageActionTypes.started ||
     action.type === sendReactionMessageActionTypes.started
   ) {
     const payload = ensureRealizedThreadIDIsUsedWhenPossible(
       action.payload,
       newThreadInfos,
     );
     const { localID, threadID } = payload;
     invariant(localID, `localID should be set on ${action.type}`);
 
     const messageIDs = messageStore.threads[threadID]?.messageIDs ?? [];
     if (!messageStore.messages[localID]) {
       for (const existingMessageID of messageIDs) {
         const existingMessageInfo = messageStore.messages[existingMessageID];
         if (existingMessageInfo && existingMessageInfo.localID === localID) {
           return { messageStoreOperations: [], messageStore };
         }
       }
     }
 
     const messageStoreOperations = [
       {
         type: 'replace',
         payload: { id: localID, messageInfo: payload },
       },
     ];
 
     const now = Date.now();
     let updatedThreads;
     let local = { ...messageStore.local };
     if (messageStore.messages[localID]) {
       const messages = { ...messageStore.messages, [localID]: payload };
       local = _pickBy(
         (localInfo: LocalMessageInfo, key: string) => key !== localID,
       )(messageStore.local);
       const thread = messageStore.threads[threadID];
       updatedThreads = {
         [threadID]: {
           messageIDs: sortMessageIDs(messages)(messageIDs),
           startReached: thread?.startReached ?? true,
           lastNavigatedTo: thread?.lastNavigatedTo ?? now,
           lastPruned: thread?.lastPruned ?? now,
         },
       };
     } else {
       updatedThreads = {
         [threadID]: messageStore.threads[threadID]
           ? {
               ...messageStore.threads[threadID],
               messageIDs: [localID, ...messageIDs],
             }
           : {
               messageIDs: [localID],
               startReached: true,
               lastNavigatedTo: now,
               lastPruned: now,
             },
       };
     }
 
     const threads = {
       ...messageStore.threads,
       ...updatedThreads,
     };
     messageStoreOperations.push({
       type: 'replace_threads',
       payload: {
         threads: { ...updatedThreads },
       },
     });
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     const newMessageStore = {
       messages: processedMessageStore.messages,
       threads,
       local,
       currentAsOf: messageStore.currentAsOf,
     };
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       newMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: newMessageStore,
     };
   } else if (
     action.type === sendTextMessageActionTypes.failed ||
     action.type === sendMultimediaMessageActionTypes.failed
   ) {
     const { localID } = action.payload;
     return {
       messageStoreOperations: [],
       messageStore: {
         messages: messageStore.messages,
         threads: messageStore.threads,
         local: {
           ...messageStore.local,
           [localID]: { sendFailed: true },
         },
         currentAsOf: messageStore.currentAsOf,
       },
     };
   } else if (action.type === sendReactionMessageActionTypes.failed) {
     const { localID, threadID } = action.payload;
     const messageStoreOperations = [];
 
     messageStoreOperations.push({
       type: 'remove',
       payload: { ids: [localID] },
     });
 
     const newMessageIDs = messageStore.threads[threadID].messageIDs.filter(
       id => id !== localID,
     );
     const updatedThreads = {
       [threadID]: {
         ...messageStore.threads[threadID],
         messageIDs: newMessageIDs,
       },
     };
 
     messageStoreOperations.push({
       type: 'replace_threads',
       payload: { threads: updatedThreads },
     });
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     const newMessageStore = {
       ...processedMessageStore,
       threads: {
         ...messageStore.threads,
         ...updatedThreads,
       },
     };
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       newMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: newMessageStore,
     };
   } else if (
     action.type === sendTextMessageActionTypes.success ||
     action.type === sendMultimediaMessageActionTypes.success ||
     action.type === sendReactionMessageActionTypes.success
   ) {
     const { payload } = action;
     invariant(
       !threadIsPending(payload.threadID),
       'Successful message action should have realized thread id',
     );
     const replaceMessageKey = (messageKey: string) =>
       messageKey === payload.localID ? payload.serverID : messageKey;
     let newMessages;
     const messageStoreOperations = [];
     if (messageStore.messages[payload.serverID]) {
       // If somehow the serverID got in there already, we'll just update the
       // serverID message and scrub the localID one
       newMessages = _omitBy(
         (messageInfo: RawMessageInfo) =>
           messageInfo.type === messageTypes.TEXT &&
           !messageInfo.id &&
           messageInfo.localID === payload.localID,
       )(messageStore.messages);
       messageStoreOperations.push({
         type: 'remove',
         payload: { ids: [payload.localID] },
       });
     } else if (messageStore.messages[payload.localID]) {
       // The normal case, the localID message gets replaced by the serverID one
       newMessages = _mapKeys(replaceMessageKey)(messageStore.messages);
       messageStoreOperations.push({
         type: 'rekey',
         payload: { from: payload.localID, to: payload.serverID },
       });
     } else {
       // Well this is weird, we probably got deauthorized between when the
       // action was dispatched and when we ran this reducer...
       return { messageStoreOperations, messageStore };
     }
 
     const newMessage = {
       ...newMessages[payload.serverID],
       id: payload.serverID,
       localID: payload.localID,
       time: payload.time,
     };
     newMessages[payload.serverID] = newMessage;
     messageStoreOperations.push({
       type: 'replace',
       payload: { id: payload.serverID, messageInfo: newMessage },
     });
     const threadID = payload.threadID;
     const newMessageIDs = _flow(
       _uniq,
       sortMessageIDs(newMessages),
     )(messageStore.threads[threadID].messageIDs.map(replaceMessageKey));
     const local = _pickBy(
       (localInfo: LocalMessageInfo, key: string) => key !== payload.localID,
     )(messageStore.local);
 
     const updatedThreads = {
       [threadID]: {
         ...messageStore.threads[threadID],
         messageIDs: newMessageIDs,
       },
     };
     messageStoreOperations.push({
       type: 'replace_threads',
       payload: { threads: updatedThreads },
     });
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     const newMessageStore = {
       ...messageStore,
       messages: processedMessageStore.messages,
       threads: {
         ...messageStore.threads,
         ...updatedThreads,
       },
       local,
     };
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       newMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: newMessageStore,
     };
   } else if (action.type === saveMessagesActionType) {
     const truncationStatuses = {};
     for (const messageInfo of action.payload.rawMessageInfos) {
       truncationStatuses[messageInfo.threadID] =
         messageTruncationStatus.UNCHANGED;
     }
     const { messageStoreOperations, messageStore: newMessageStore } =
       mergeNewMessages(
         messageStore,
         action.payload.rawMessageInfos,
         truncationStatuses,
         newThreadInfos,
         action.type,
       );
     return {
       messageStoreOperations,
       messageStore: {
         messages: newMessageStore.messages,
         threads: newMessageStore.threads,
         local: newMessageStore.local,
         // We avoid bumping currentAsOf because notifs may include a contracted
         // RawMessageInfo, so we want to make sure we still fetch it
         currentAsOf: messageStore.currentAsOf,
       },
     };
   } else if (action.type === messageStorePruneActionType) {
     const now = Date.now();
     const messageIDsToPrune = [];
 
     const updatedThreads = {};
     for (const threadID of action.payload.threadIDs) {
       let thread = messageStore.threads[threadID];
       if (!thread) {
         continue;
       }
       thread = { ...thread, lastPruned: now };
 
       const newMessageIDs = [...thread.messageIDs];
       const removed = newMessageIDs.splice(defaultNumberPerThread);
       if (removed.length > 0) {
         thread = {
           ...thread,
           messageIDs: newMessageIDs,
           startReached: false,
         };
       }
       for (const id of removed) {
         messageIDsToPrune.push(id);
       }
 
       updatedThreads[threadID] = thread;
     }
 
     const messageStoreOperations = [
       {
         type: 'remove',
         payload: { ids: messageIDsToPrune },
       },
       {
         type: 'replace_threads',
         payload: {
           threads: updatedThreads,
         },
       },
     ];
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     const newMessageStore = {
       messages: processedMessageStore.messages,
       threads: {
         ...messageStore.threads,
         ...updatedThreads,
       },
       local: _omit(messageIDsToPrune)(messageStore.local),
       currentAsOf: messageStore.currentAsOf,
     };
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       newMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: newMessageStore,
     };
   } else if (action.type === updateMultimediaMessageMediaActionType) {
     const { messageID: id, currentMediaID, mediaUpdate } = action.payload;
     const message = messageStore.messages[id];
     invariant(message, `message with ID ${id} could not be found`);
     invariant(
       message.type === messageTypes.IMAGES ||
         message.type === messageTypes.MULTIMEDIA,
       `message with ID ${id} is not multimedia`,
     );
 
     let updatedMessage;
     let replaced = false;
     if (message.type === messageTypes.IMAGES) {
       const media: Image[] = [];
       for (const singleMedia of message.media) {
         if (singleMedia.id !== currentMediaID) {
           media.push(singleMedia);
         } else {
           let updatedMedia: Image = {
             id: mediaUpdate.id ?? singleMedia.id,
             type: 'photo',
             uri: mediaUpdate.uri ?? singleMedia.uri,
             dimensions: mediaUpdate.dimensions ?? singleMedia.dimensions,
+            thumbHash: mediaUpdate.thumbHash ?? singleMedia.thumbHash,
           };
 
           if (
             'localMediaSelection' in singleMedia &&
             !('localMediaSelection' in mediaUpdate)
           ) {
             updatedMedia = {
               ...updatedMedia,
               localMediaSelection: singleMedia.localMediaSelection,
             };
           } else if (mediaUpdate.localMediaSelection) {
             updatedMedia = {
               ...updatedMedia,
               localMediaSelection: mediaUpdate.localMediaSelection,
             };
           }
 
           media.push(updatedMedia);
           replaced = true;
         }
       }
       updatedMessage = { ...message, media };
     } else {
       const media: Media[] = [];
       for (const singleMedia of message.media) {
         if (singleMedia.id !== currentMediaID) {
           media.push(singleMedia);
         } else if (
           singleMedia.type === 'photo' &&
           mediaUpdate.type === 'photo'
         ) {
           media.push({ ...singleMedia, ...mediaUpdate });
           replaced = true;
         } else if (
           singleMedia.type === 'video' &&
           mediaUpdate.type === 'video'
         ) {
           media.push({ ...singleMedia, ...mediaUpdate });
           replaced = true;
         } else if (
           singleMedia.type === 'encrypted_photo' &&
           mediaUpdate.type === 'encrypted_photo'
         ) {
           media.push({ ...singleMedia, ...mediaUpdate });
           replaced = true;
         } else if (
           singleMedia.type === 'encrypted_video' &&
           mediaUpdate.type === 'encrypted_video'
         ) {
           media.push({ ...singleMedia, ...mediaUpdate });
           replaced = true;
         } else if (
           singleMedia.type === 'photo' &&
           mediaUpdate.type === 'encrypted_photo'
         ) {
           // extract fields that are absent in encrypted_photo type
           const { uri, localMediaSelection, ...original } = singleMedia;
           const { holder, encryptionKey, ...update } = mediaUpdate;
           invariant(
             holder && encryptionKey,
             'holder and encryptionKey are required for encrypted_photo message',
           );
           media.push({
             ...original,
             ...update,
             type: 'encrypted_photo',
             holder,
             encryptionKey,
           });
           replaced = true;
         } else if (
           singleMedia.type === 'video' &&
           mediaUpdate.type === 'encrypted_video'
         ) {
           const { uri, thumbnailURI, localMediaSelection, ...original } =
             singleMedia;
           const {
             holder,
             encryptionKey,
             thumbnailHolder,
             thumbnailEncryptionKey,
             ...update
           } = mediaUpdate;
           invariant(
             holder && encryptionKey,
             'holder and encryptionKey are required for encrypted_video message',
           );
           invariant(
             thumbnailHolder && thumbnailEncryptionKey,
             'thumbnailHolder and thumbnailEncryptionKey are required for ' +
               'encrypted_video message',
           );
           media.push({
             ...original,
             ...update,
             type: 'encrypted_video',
             holder,
             encryptionKey,
             thumbnailHolder,
             thumbnailEncryptionKey,
           });
           replaced = true;
         }
       }
       updatedMessage = { ...message, media };
     }
 
     invariant(
       replaced,
       `message ${id} did not contain media with ID ${currentMediaID}`,
     );
 
     const messageStoreOperations = [
       {
         type: 'replace',
         payload: {
           id,
           messageInfo: updatedMessage,
         },
       },
     ];
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     return {
       messageStoreOperations,
       messageStore: {
         ...messageStore,
         messages: processedMessageStore.messages,
       },
     };
   } else if (action.type === createLocalMessageActionType) {
     const messageInfo = ensureRealizedThreadIDIsUsedWhenPossible(
       action.payload,
       newThreadInfos,
     );
     const { localID, threadID } = messageInfo;
 
     const messageIDs =
       messageStore.threads[messageInfo.threadID]?.messageIDs ?? [];
     const now = Date.now();
     const threadState: ThreadMessageInfo = messageStore.threads[threadID]
       ? {
           ...messageStore.threads[threadID],
           messageIDs: [localID, ...messageIDs],
         }
       : {
           messageIDs: [localID],
           startReached: true,
           lastNavigatedTo: now,
           lastPruned: now,
         };
 
     const messageStoreOperations = [
       {
         type: 'replace',
         payload: { id: localID, messageInfo },
       },
       {
         type: 'replace_threads',
         payload: {
           threads: { [threadID]: threadState },
         },
       },
     ];
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     const newMessageStore = {
       ...messageStore,
       threads: {
         ...messageStore.threads,
         [threadID]: threadState,
       },
       messages: processedMessageStore.messages,
     };
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       newMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: newMessageStore,
     };
   } else if (action.type === processServerRequestsActionType) {
     const {
       messageStoreOperations,
       messageStore: messageStoreAfterReassignment,
     } = reassignMessagesToRealizedThreads(messageStore, newThreadInfos);
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       messageStoreAfterReassignment,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: {
         ...messageStoreAfterReassignment,
         messages: processedMessageStore.messages,
       },
     };
   } else if (action.type === setClientDBStoreActionType) {
     const payloadMessages = action.payload.messages;
     if (!payloadMessages) {
       return { messageStoreOperations: [], messageStore };
     }
     const actionPayloadMessageStoreThreads =
       translateClientDBThreadMessageInfos(
         action.payload.messageStoreThreads ?? [],
       );
 
     const newThreads = {};
     for (const threadID in actionPayloadMessageStoreThreads) {
       newThreads[threadID] = {
         ...actionPayloadMessageStoreThreads[threadID],
         messageIDs: messageStore.threads[threadID]?.messageIDs ?? [],
       };
     }
 
     assertMessageStoreThreadsAreEqual(
       {
         ...messageStore,
         threads: newThreads,
       },
       messageStore,
       `${action.type} | comparing SQLite with redux-persist`,
     );
 
     const { messageStoreOperations, messageStore: updatedMessageStore } =
       updateMessageStoreWithLatestThreadInfos(messageStore, newThreadInfos);
 
     let threads = { ...updatedMessageStore.threads };
     let local = { ...updatedMessageStore.local };
 
     // Store message IDs already contained within threads so that we
     // do not insert duplicates
     const existingMessageIDs = new Set();
     for (const threadID in threads) {
       threads[threadID].messageIDs.forEach(msgID => {
         existingMessageIDs.add(msgID);
       });
     }
     const threadsNeedMsgIDsResorting = new Set();
     const actionPayloadMessages =
       translateClientDBMessageInfosToRawMessageInfos(payloadMessages);
 
     // When starting the app on native, we filter out any local-only multimedia
     // messages because the relevant context is no longer available
     const messageIDsToBeRemoved = [];
     const threadsToAdd = {};
     for (const id in actionPayloadMessages) {
       const message = actionPayloadMessages[id];
       const { threadID } = message;
       let existingThread = threads[threadID];
       if (!existingThread) {
         existingThread = newThread();
         threadsToAdd[threadID] = existingThread;
       }
       if (
         (message.type === messageTypes.IMAGES ||
           message.type === messageTypes.MULTIMEDIA) &&
         !message.id
       ) {
         messageIDsToBeRemoved.push(id);
         threads = {
           ...threads,
           [threadID]: {
             ...existingThread,
             messageIDs: existingThread.messageIDs.filter(
               curMessageID => curMessageID !== id,
             ),
           },
         };
         local = _pickBy(
           (localInfo: LocalMessageInfo, key: string) => key !== id,
         )(local);
       } else if (!existingMessageIDs.has(id)) {
         threads = {
           ...threads,
           [threadID]: {
             ...existingThread,
             messageIDs: [...existingThread.messageIDs, id],
           },
         };
         threadsNeedMsgIDsResorting.add(threadID);
       } else if (!threads[threadID]) {
         threads = { ...threads, [threadID]: existingThread };
       }
     }
 
     for (const threadID of threadsNeedMsgIDsResorting) {
       threads[threadID].messageIDs = sortMessageIDs(actionPayloadMessages)(
         threads[threadID].messageIDs,
       );
     }
 
     const newMessageStore = {
       ...updatedMessageStore,
       messages: actionPayloadMessages,
       threads: threads,
       local: local,
     };
 
     if (messageIDsToBeRemoved.length > 0) {
       messageStoreOperations.push({
         type: 'remove',
         payload: { ids: messageIDsToBeRemoved },
       });
     }
 
     const processedMessageStore = processMessageStoreOperations(
       newMessageStore,
       messageStoreOperations,
     );
 
     messageStoreOperations.push({
       type: 'replace_threads',
       payload: { threads: threadsToAdd },
     });
 
     return {
       messageStoreOperations,
       messageStore: processedMessageStore,
     };
   }
   return { messageStoreOperations: [], messageStore };
 }
 
 type MergedUpdatesWithMessages = {
   +rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +truncationStatuses: MessageTruncationStatuses,
 };
 function mergeUpdatesWithMessageInfos(
   messageInfos: $ReadOnlyArray<RawMessageInfo>,
   newUpdates: $ReadOnlyArray<ClientUpdateInfo>,
   truncationStatuses?: MessageTruncationStatuses,
 ): MergedUpdatesWithMessages {
   const messageIDs = new Set(messageInfos.map(messageInfo => messageInfo.id));
   const mergedMessageInfos = [...messageInfos];
   const mergedTruncationStatuses = { ...truncationStatuses };
 
   for (const updateInfo of newUpdates) {
     if (updateInfo.type !== updateTypes.JOIN_THREAD) {
       continue;
     }
     for (const messageInfo of updateInfo.rawMessageInfos) {
       if (messageIDs.has(messageInfo.id)) {
         continue;
       }
       mergedMessageInfos.push(messageInfo);
       messageIDs.add(messageInfo.id);
     }
 
     mergedTruncationStatuses[updateInfo.threadInfo.id] =
       combineTruncationStatuses(
         updateInfo.truncationStatus,
         mergedTruncationStatuses[updateInfo.threadInfo.id],
       );
   }
   return {
     rawMessageInfos: mergedMessageInfos,
     truncationStatuses: mergedTruncationStatuses,
   };
 }
 
 export { freshMessageStore, reduceMessageStore };
diff --git a/lib/reducers/message-reducer.test.js b/lib/reducers/message-reducer.test.js
index e52a9dadd..b0ddd3bb3 100644
--- a/lib/reducers/message-reducer.test.js
+++ b/lib/reducers/message-reducer.test.js
@@ -1,316 +1,318 @@
 // @flow
 
 import invariant from 'invariant';
 
 import { reduceMessageStore } from './message-reducer.js';
 import { createPendingThread } from '../shared/thread-utils.js';
 import { messageTypes } from '../types/message-types-enum.js';
 import type { MessageStore } from '../types/message-types.js';
 import { threadTypes } from '../types/thread-types-enum.js';
 
 const messageStoreBeforeMediaUpdate: MessageStore = {
   messages: {
     local1: {
       type: 14,
       threadID: '91140',
       creatorID: '91097',
       time: 1639522317443,
       media: [
         {
           id: 'localUpload2',
           uri: 'assets-library://asset/asset.HEIC?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=HEIC',
           type: 'photo',
           dimensions: { height: 3024, width: 4032 },
+          thumbHash: 'some_thumb_hash',
           localMediaSelection: {
             step: 'photo_library',
             dimensions: { height: 3024, width: 4032 },
             uri: 'assets-library://asset/asset.HEIC?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=HEIC',
             filename: 'IMG_0006.HEIC',
             mediaNativeID: 'CC95F08C-88C3-4012-9D6D-64A413D254B3/L0/001',
             selectTime: 1639522317349,
             sendTime: 1639522317349,
             retries: 0,
           },
         },
       ],
       localID: 'local1',
     },
   },
   threads: {
     '91140': {
       messageIDs: ['local1'],
       startReached: true,
       lastNavigatedTo: 1639522314170,
       lastPruned: 1639522292271,
     },
   },
   local: {},
   currentAsOf: 1639522292174,
 };
 
 describe('UPDATE_MULTIMEDIA_MESSAGE_MEDIA', () => {
   const updateMultiMediaMessageMediaAction = {
     type: 'UPDATE_MULTIMEDIA_MESSAGE_MEDIA',
     payload: {
       messageID: 'local1',
       currentMediaID: 'localUpload2',
       mediaUpdate: {
         id: '91172',
         type: 'photo',
         uri: 'http://localhost/comm/upload/91172/dfa9b9fe7eb03fde',
         dimensions: { height: 1440, width: 1920 },
         localMediaSelection: undefined,
       },
     },
   };
   const { messageStore: updatedMessageStore } = reduceMessageStore(
     messageStoreBeforeMediaUpdate,
     updateMultiMediaMessageMediaAction,
     {},
   );
 
   test('replace local media with uploaded media', () => {
     expect(
       updatedMessageStore.messages[
         updateMultiMediaMessageMediaAction.payload.messageID
       ],
     ).toStrictEqual({
       type: 14,
       threadID: '91140',
       creatorID: '91097',
       time: 1639522317443,
       media: [
         {
           id: '91172',
           type: 'photo',
           uri: 'http://localhost/comm/upload/91172/dfa9b9fe7eb03fde',
           dimensions: { height: 1440, width: 1920 },
+          thumbHash: 'some_thumb_hash',
         },
       ],
       localID: 'local1',
     });
   });
 
   test('localMediaSelection is unset when undefined in update', () => {
     const msg =
       updatedMessageStore.messages[
         updateMultiMediaMessageMediaAction.payload.messageID
       ];
 
     expect(msg.type).toEqual(messageTypes.IMAGES);
     invariant(msg.type === messageTypes.IMAGES, 'message is of type IMAGES');
     expect(msg.media[0]).not.toHaveProperty('localMediaSelection');
   });
 
   test('localMediaSelection is unchanged when missing in update', () => {
     const actionWithoutLocalMediaSelectionUpdate = {
       type: 'UPDATE_MULTIMEDIA_MESSAGE_MEDIA',
       payload: {
         messageID: 'local1',
         currentMediaID: 'localUpload2',
         mediaUpdate: {
           id: '91172',
           type: 'photo',
           uri: 'http://localhost/comm/upload/91172/dfa9b9fe7eb03fde',
           dimensions: { height: 1440, width: 1920 },
         },
       },
     };
     const { messageStore: storeWithoutLocalMediaSelectionUpdate } =
       reduceMessageStore(
         messageStoreBeforeMediaUpdate,
         actionWithoutLocalMediaSelectionUpdate,
         {},
       );
     const prevMsg =
       messageStoreBeforeMediaUpdate.messages[
         actionWithoutLocalMediaSelectionUpdate.payload.messageID
       ];
     const updatedMsg =
       storeWithoutLocalMediaSelectionUpdate.messages[
         actionWithoutLocalMediaSelectionUpdate.payload.messageID
       ];
 
     expect(updatedMsg.type).toEqual(messageTypes.IMAGES);
     expect(prevMsg.type).toEqual(messageTypes.IMAGES);
     invariant(
       updatedMsg.type === messageTypes.IMAGES &&
         prevMsg.type === messageTypes.IMAGES,
       'message is of type IMAGES',
     );
 
     expect(updatedMsg.media[0].localMediaSelection).toStrictEqual(
       prevMsg.media[0].localMediaSelection,
     );
   });
 
   test('localMediaSelection is updated when included in update', () => {
     const updateMultiMediaMessageMediaActionWithReplacement = {
       type: 'UPDATE_MULTIMEDIA_MESSAGE_MEDIA',
       payload: {
         messageID: 'local1',
         currentMediaID: 'localUpload2',
         mediaUpdate: {
           id: '91172',
           type: 'photo',
           uri: 'http://localhost/comm/upload/91172/dfa9b9fe7eb03fde',
           dimensions: { height: 1440, width: 1920 },
           localMediaSelection: {
             step: 'photo_library',
             dimensions: { height: 10, width: 10 },
             uri: 'assets-library://asset/new/path',
             filename: 'NEWNAME.PNG',
             mediaNativeID: 'CC95F08C-88C3-4012-9D6D-64A413D254B3/L0/001',
             selectTime: 1639522317349,
             sendTime: 1639522317349,
             retries: 1,
           },
         },
       },
     };
     const { messageStore: updatedMessageStoreWithReplacement } =
       reduceMessageStore(
         messageStoreBeforeMediaUpdate,
         updateMultiMediaMessageMediaActionWithReplacement,
         {},
       );
     const updatedMsg =
       updatedMessageStoreWithReplacement.messages[
         updateMultiMediaMessageMediaActionWithReplacement.payload.messageID
       ];
     expect(updatedMsg.type).toEqual(messageTypes.IMAGES);
     invariant(
       updatedMsg.type === messageTypes.IMAGES,
       'message is of type IMAGES',
     );
 
     expect(updatedMsg.media[0].localMediaSelection).toStrictEqual({
       step: 'photo_library',
       dimensions: { height: 10, width: 10 },
       uri: 'assets-library://asset/new/path',
       filename: 'NEWNAME.PNG',
       mediaNativeID: 'CC95F08C-88C3-4012-9D6D-64A413D254B3/L0/001',
       selectTime: 1639522317349,
       sendTime: 1639522317349,
       retries: 1,
     });
   });
 });
 
 describe('SET_MESSAGE_STORE_MESSAGES', () => {
   const clientDBMessages = [
     {
       id: '103502',
       local_id: null,
       thread: '88471',
       user: '83809',
       type: '14',
       future_type: null,
       content: '[103501]',
       time: '1658168455316',
       media_infos: [
         {
           id: '103501',
           uri: 'http://localhost/comm/upload/103501/425db25471f3acd5',
           type: 'photo',
           extras: '{"dimensions":{"width":1920,"height":1440},"loop":false}',
         },
       ],
     },
     {
       id: 'local10',
       local_id: 'local10',
       thread: '88471',
       user: '83809',
       type: '14',
       future_type: null,
       content: '[null]',
       time: '1658172650495',
       media_infos: [
         {
           id: 'localUpload0',
           uri: 'assets-library://asset/asset.heic?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=heic',
           type: 'photo',
           extras:
             '{"dimensions":{"height":3024,"width":4032},"loop":false,"local_media_selection":{"step":"photo_library","dimensions":{"height":3024,"width":4032},"uri":"assets-library://asset/asset.heic?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=heic","filename":"IMG_0006.HEIC","mediaNativeID":"CC95F08C-88C3-4012-9D6D-64A413D254B3/L0/001","selectTime":1658172650370,"sendTime":1658172650370,"retries":0}}',
         },
       ],
     },
     {
       id: 'local11',
       local_id: 'local11',
       thread: '88471',
       user: '83809',
       type: '14',
       future_type: null,
       content: '[null,null]',
       time: '1658172656976',
       media_infos: [
         {
           id: 'localUpload2',
           uri: 'assets-library://asset/asset.heic?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=heic',
           type: 'photo',
           extras:
             '{"dimensions":{"height":3024,"width":4032},"loop":false,"local_media_selection":{"step":"photo_library","dimensions":{"height":3024,"width":4032},"uri":"assets-library://asset/asset.heic?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=heic","filename":"IMG_0006.HEIC","mediaNativeID":"CC95F08C-88C3-4012-9D6D-64A413D254B3/L0/001","selectTime":1658172656826,"sendTime":1658172656826,"retries":0}}',
         },
         {
           id: 'localUpload4',
           uri: 'assets-library://asset/asset.jpg?id=ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED&ext=jpg',
           type: 'photo',
           extras:
             '{"dimensions":{"height":2002,"width":3000},"loop":false,"local_media_selection":{"step":"photo_library","dimensions":{"height":2002,"width":3000},"uri":"assets-library://asset/asset.jpg?id=ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED&ext=jpg","filename":"IMG_0005.JPG","mediaNativeID":"ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED/L0/001","selectTime":1658172656826,"sendTime":1658172656826,"retries":0}}',
         },
       ],
     },
   ];
 
   const threads = {
     '88471': {
       messageIDs: ['local11', 'local10', '103502'],
       startReached: false,
       lastNavigatedTo: 1658172614602,
       lastPruned: 1658169913623,
     },
   };
 
   const { messageStore: updatedMessageStore } = reduceMessageStore(
     {
       messages: {},
       threads,
       local: {},
       currentAsOf: 1234567890123,
     },
     {
       type: 'SET_CLIENT_DB_STORE',
       payload: {
         currentUserID: '',
         drafts: [],
         threadStore: {
           threadInfos: {},
         },
         messageStoreThreads: [],
         messages: clientDBMessages,
       },
     },
     {
       [88471]: createPendingThread({
         viewerID: '',
         threadType: threadTypes.LOCAL,
         members: [{ id: '', username: '' }],
       }),
     },
   );
   test('removes local media when constructing messageStore.messages', () => {
     expect(updatedMessageStore.messages).toHaveProperty('103502');
     expect(updatedMessageStore.messages).not.toHaveProperty('local10');
     expect(updatedMessageStore.messages).not.toHaveProperty('local11');
   });
 
   test('removes local media when constructing messageStore.threads', () => {
     expect(updatedMessageStore).toBeDefined();
     expect(updatedMessageStore.threads).toBeDefined();
     expect(updatedMessageStore.threads['88471']).toBeDefined();
     expect(updatedMessageStore.threads['88471'].messageIDs).toBeDefined();
     expect(updatedMessageStore.threads['88471'].messageIDs).toEqual(['103502']);
   });
 });
diff --git a/lib/types/media-types.js b/lib/types/media-types.js
index c7c31e27b..f2b1e79dc 100644
--- a/lib/types/media-types.js
+++ b/lib/types/media-types.js
@@ -1,728 +1,736 @@
 // @flow
 
 import t, { type TInterface, type TUnion } from 'tcomb';
 
 import type { Shape } from './core.js';
 import { type Platform } from './device-types.js';
 import { tShape, tString, tID } from '../utils/validation-utils.js';
 
 export type Dimensions = $ReadOnly<{
   +height: number,
   +width: number,
 }>;
 
 export const dimensionsValidator: TInterface<Dimensions> = tShape<Dimensions>({
   height: t.Number,
   width: t.Number,
 });
 
 export type MediaType = 'photo' | 'video';
 
 export type EncryptedMediaType = 'encrypted_photo' | 'encrypted_video';
 
 export type AvatarMediaInfo = {
   +type: 'photo',
   +uri: string,
 };
 
 export type ClientDBMediaInfo = {
   +id: string,
   +uri: string,
   +type: 'photo' | 'video',
   +extras: string,
 };
 
 export type Corners = Shape<{
   +topLeft: boolean,
   +topRight: boolean,
   +bottomLeft: boolean,
   +bottomRight: boolean,
 }>;
 
 export type MediaInfo =
   | {
       ...Image,
       +index: number,
     }
   | {
       ...Video,
       +index: number,
     }
   | {
       ...EncryptedImage,
       +index: number,
     }
   | {
       ...EncryptedVideo,
       +index: number,
     };
 
 export type UploadMultimediaResult = {
   +id: string,
   +uri: string,
   +dimensions: Dimensions,
   +mediaType: MediaType,
   +loop: boolean,
 };
 
 export type UpdateMultimediaMessageMediaPayload = {
   +messageID: string,
   +currentMediaID: string,
   +mediaUpdate: Shape<Media>,
 };
 
 export type UploadDeletionRequest = {
   +id: string,
 };
 
 export type UploadMediaMetadataRequest = {
   ...Dimensions,
   +filename: string,
   +blobHolder: string,
   +encryptionKey: string,
   +mimeType: string,
   +loop?: boolean,
   +thumbHash?: string,
 };
 
 export type FFmpegStatistics = {
   // seconds of video being processed per second
   +speed: number,
   // total milliseconds of video processed so far
   +time: number,
   // total result file size in bytes so far
   +size: number,
   +videoQuality: number,
   +videoFrameNumber: number,
   +videoFps: number,
   +bitrate: number,
 };
 
 export type TranscodeVideoMediaMissionStep = {
   +step: 'video_ffmpeg_transcode',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +returnCode: ?number,
   +newPath: ?string,
   +stats: ?FFmpegStatistics,
 };
 
 export type VideoGenerateThumbnailMediaMissionStep = {
   +step: 'video_generate_thumbnail',
   +success: boolean,
   +time: number, // ms
   +returnCode: number,
   +thumbnailURI: string,
 };
 
 export type VideoInfo = {
   +codec: ?string,
   +dimensions: ?Dimensions,
   +duration: number, // seconds
   +format: $ReadOnlyArray<string>,
 };
 
 export type VideoProbeMediaMissionStep = {
   +step: 'video_probe',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +path: string,
   +validFormat: boolean,
   +duration: ?number, // seconds
   +codec: ?string,
   +format: ?$ReadOnlyArray<string>,
   +dimensions: ?Dimensions,
 };
 
 export type ReadFileHeaderMediaMissionStep = {
   +step: 'read_file_header',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +uri: string,
   +mime: ?string,
   +mediaType: ?MediaType,
 };
 
 export type DetermineFileTypeMediaMissionStep = {
   +step: 'determine_file_type',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +inputFilename: string,
   +outputMIME: ?string,
   +outputMediaType: ?MediaType,
   +outputFilename: ?string,
 };
 
 export type FrameCountMediaMissionStep = {
   +step: 'frame_count',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number,
   +path: string,
   +mime: string,
   +hasMultipleFrames: ?boolean,
 };
 
 export type DisposeTemporaryFileMediaMissionStep = {
   +step: 'dispose_temporary_file',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +path: string,
 };
 
 export type MakeDirectoryMediaMissionStep = {
   +step: 'make_directory',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +path: string,
 };
 
 export type AndroidScanFileMediaMissionStep = {
   +step: 'android_scan_file',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +path: string,
 };
 
 export type FetchFileHashMediaMissionStep = {
   +step: 'fetch_file_hash',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +path: string,
   +hash: ?string,
 };
 
 export type CopyFileMediaMissionStep = {
   +step: 'copy_file',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +source: string,
   +destination: string,
 };
 
 export type GetOrientationMediaMissionStep = {
   +step: 'exif_fetch',
   +success: boolean,
   +exceptionMessage: ?string,
   +time: number, // ms
   +orientation: ?number,
 };
 
 export type GenerateThumbhashMediaMissionStep = {
   +step: 'generate_thumbhash',
   +success: boolean,
   +exceptionMessage: ?string,
   +thumbHash: ?string,
 };
 
 export type EncryptFileMediaMissionStep =
   | {
       +step: 'read_plaintext_file',
       +file: string,
       +time: number, // ms
       +success: boolean,
       +exceptionMessage: ?string,
     }
   | {
       +step: 'encrypt_data',
       +dataSize: number,
       +time: number, // ms
       +isPadded: boolean,
       +sha256: ?string,
       +success: boolean,
       +exceptionMessage: ?string,
     }
   | {
       +step: 'write_encrypted_file',
       +file: string,
       +time: number, // ms
       +success: boolean,
       +exceptionMessage: ?string,
     };
 
 export type MediaLibrarySelection =
   | {
       +step: 'photo_library',
       +dimensions: Dimensions,
       +filename: ?string,
       +uri: string,
       +mediaNativeID: ?string,
       +selectTime: number, // ms timestamp
       +sendTime: number, // ms timestamp
       +retries: number,
     }
   | {
       +step: 'video_library',
       +dimensions: Dimensions,
       +filename: ?string,
       +uri: string,
       +mediaNativeID: ?string,
       +selectTime: number, // ms timestamp
       +sendTime: number, // ms timestamp
       +retries: number,
       +duration: number, // seconds
     };
 
 export const mediaLibrarySelectionValidator: TUnion<MediaLibrarySelection> =
   t.union([
     tShape({
       step: tString('photo_library'),
       dimensions: dimensionsValidator,
       filename: t.maybe(t.String),
       uri: t.String,
       mediaNativeID: t.maybe(t.String),
       selectTime: t.Number,
       sendTime: t.Number,
       retries: t.Number,
     }),
     tShape({
       step: tString('video_library'),
       dimensions: dimensionsValidator,
       filename: t.maybe(t.String),
       uri: t.String,
       mediaNativeID: t.maybe(t.String),
       selectTime: t.Number,
       sendTime: t.Number,
       retries: t.Number,
       duration: t.Number,
     }),
   ]);
 
 export type PhotoCapture = {
   +step: 'photo_capture',
   +time: number, // ms
   +dimensions: Dimensions,
   +filename: string,
   +uri: string,
   +captureTime: number, // ms timestamp
   +selectTime: number, // ms timestamp
   +sendTime: number, // ms timestamp
   +retries: number,
 };
 
 export const photoCaptureValidator: TInterface<PhotoCapture> =
   tShape<PhotoCapture>({
     step: tString('photo_capture'),
     time: t.Number,
     dimensions: dimensionsValidator,
     filename: t.String,
     uri: t.String,
     captureTime: t.Number,
     selectTime: t.Number,
     sendTime: t.Number,
     retries: t.Number,
   });
 
 export type PhotoPaste = {
   +step: 'photo_paste',
   +dimensions: Dimensions,
   +filename: string,
   +uri: string,
   +selectTime: number, // ms timestamp
   +sendTime: number, // ms timestamp
   +retries: number,
 };
 
 export const photoPasteValidator: TInterface<PhotoPaste> = tShape<PhotoPaste>({
   step: tString('photo_paste'),
   dimensions: dimensionsValidator,
   filename: t.String,
   uri: t.String,
   selectTime: t.Number,
   sendTime: t.Number,
   retries: t.Number,
 });
 
 export type NativeMediaSelection =
   | MediaLibrarySelection
   | PhotoCapture
   | PhotoPaste;
 
 export const nativeMediaSelectionValidator: TUnion<NativeMediaSelection> =
   t.union([
     mediaLibrarySelectionValidator,
     photoCaptureValidator,
     photoPasteValidator,
   ]);
 
 export type MediaMissionStep =
   | NativeMediaSelection
   | {
       +step: 'web_selection',
       +filename: string,
       +size: number, // in bytes
       +mime: string,
       +selectTime: number, // ms timestamp
     }
   | {
       +step: 'asset_info_fetch',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +localURI: ?string,
       +orientation: ?number,
     }
   | {
       +step: 'stat_file',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +uri: string,
       +fileSize: ?number,
     }
   | ReadFileHeaderMediaMissionStep
   | DetermineFileTypeMediaMissionStep
   | FrameCountMediaMissionStep
   | {
       +step: 'photo_manipulation',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +manipulation: Object,
       +newMIME: ?string,
       +newDimensions: ?Dimensions,
       +newURI: ?string,
     }
   | VideoProbeMediaMissionStep
   | TranscodeVideoMediaMissionStep
   | VideoGenerateThumbnailMediaMissionStep
   | DisposeTemporaryFileMediaMissionStep
   | {
       +step: 'save_media',
       +uri: string,
       +time: number, // ms timestamp
     }
   | {
       +step: 'permissions_check',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +platform: Platform,
       +permissions: $ReadOnlyArray<string>,
     }
   | MakeDirectoryMediaMissionStep
   | AndroidScanFileMediaMissionStep
   | {
       +step: 'ios_save_to_library',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +uri: string,
     }
   | {
       +step: 'fetch_blob',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +inputURI: string,
       +uri: string,
       +size: ?number,
       +mime: ?string,
     }
   | {
       +step: 'data_uri_from_blob',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +first255Chars: ?string,
     }
   | {
       +step: 'array_buffer_from_blob',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
     }
   | {
       +step: 'mime_check',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +mime: ?string,
     }
   | {
       +step: 'write_file',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +path: string,
       +length: number,
     }
   | FetchFileHashMediaMissionStep
   | CopyFileMediaMissionStep
   | EncryptFileMediaMissionStep
   | GetOrientationMediaMissionStep
   | GenerateThumbhashMediaMissionStep
   | {
       +step: 'preload_image',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +uri: string,
       +dimensions: ?Dimensions,
     }
   | {
       +step: 'reorient_image',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +uri: ?string,
     }
   | {
       +step: 'upload',
       +success: boolean,
       +exceptionMessage: ?string,
       +time: number, // ms
       +inputFilename: string,
       +outputMediaType: ?MediaType,
       +outputURI: ?string,
       +outputDimensions: ?Dimensions,
       +outputLoop: ?boolean,
       +hasWiFi?: boolean,
     }
   | {
       +step: 'wait_for_capture_uri_unload',
       +success: boolean,
       +time: number, // ms
       +uri: string,
     };
 
 export type MediaMissionFailure =
   | {
       +success: false,
       +reason: 'no_file_path',
     }
   | {
       +success: false,
       +reason: 'file_stat_failed',
       +uri: string,
     }
   | {
       +success: false,
       +reason: 'photo_manipulation_failed',
       +size: number, // in bytes
     }
   | {
       +success: false,
       +reason: 'media_type_fetch_failed',
       +detectedMIME: ?string,
     }
   | {
       +success: false,
       +reason: 'mime_type_mismatch',
       +reportedMediaType: MediaType,
       +reportedMIME: string,
       +detectedMIME: string,
     }
   | {
       +success: false,
       +reason: 'http_upload_failed',
       +exceptionMessage: ?string,
     }
   | {
       +success: false,
       +reason: 'video_too_long',
       +duration: number, // in seconds
     }
   | {
       +success: false,
       +reason: 'video_probe_failed',
     }
   | {
       +success: false,
       +reason: 'video_transcode_failed',
     }
   | {
       +success: false,
       +reason: 'video_generate_thumbnail_failed',
     }
   | {
       +success: false,
       +reason: 'processing_exception',
       +time: number, // ms
       +exceptionMessage: ?string,
     }
   | {
       +success: false,
       +reason: 'encryption_exception',
       +time: number, // ms
       +exceptionMessage: ?string,
     }
   | {
       +success: false,
       +reason: 'save_unsupported',
     }
   | {
       +success: false,
       +reason: 'missing_permission',
     }
   | {
       +success: false,
       +reason: 'make_directory_failed',
     }
   | {
       +success: false,
       +reason: 'resolve_failed',
       +uri: string,
     }
   | {
       +success: false,
       +reason: 'save_to_library_failed',
       +uri: string,
     }
   | {
       +success: false,
       +reason: 'fetch_failed',
     }
   | {
       +success: false,
       +reason: 'data_uri_failed',
     }
   | {
       +success: false,
       +reason: 'array_buffer_failed',
     }
   | {
       +success: false,
       +reason: 'mime_check_failed',
       +mime: ?string,
     }
   | {
       +success: false,
       +reason: 'write_file_failed',
     }
   | {
       +success: false,
       +reason: 'fetch_file_hash_failed',
     }
   | {
       +success: false,
       +reason: 'copy_file_failed',
     }
   | {
       +success: false,
       +reason: 'exif_fetch_failed',
     }
   | {
       +success: false,
       +reason: 'reorient_image_failed',
     }
   | {
       +success: false,
       +reason: 'web_sibling_validation_failed',
     }
   | {
       +success: false,
       +reason: 'encryption_failed',
     }
   | { +success: false, +reason: 'digest_failed' };
 
 export type MediaMissionResult = MediaMissionFailure | { +success: true };
 
 export type MediaMission = {
   +steps: $ReadOnlyArray<MediaMissionStep>,
   +result: MediaMissionResult,
   +userTime: number,
   +totalTime: number,
 };
 
 export type Image = {
   +id: string,
   +uri: string,
   +type: 'photo',
   +dimensions: Dimensions,
+  +thumbHash: ?string,
   // stored on native only during creation in case retry needed after state lost
   +localMediaSelection?: NativeMediaSelection,
 };
 
 export const imageValidator: TInterface<Image> = tShape<Image>({
   id: tID,
   uri: t.String,
   type: tString('photo'),
   dimensions: dimensionsValidator,
+  thumbHash: t.maybe(t.String),
   localMediaSelection: t.maybe(nativeMediaSelectionValidator),
 });
 
 export type EncryptedImage = {
   +id: string,
   // a media URI for keyserver uploads / blob holder for Blob service uploads
   +holder: string,
   +encryptionKey: string,
   +type: 'encrypted_photo',
   +dimensions: Dimensions,
+  +thumbHash: ?string,
 };
 
 export const encryptedImageValidator: TInterface<EncryptedImage> =
   tShape<EncryptedImage>({
     id: tID,
     holder: t.String,
     encryptionKey: t.String,
     type: tString('encrypted_photo'),
     dimensions: dimensionsValidator,
+    thumbHash: t.maybe(t.String),
   });
 
 export type Video = {
   +id: string,
   +uri: string,
   +type: 'video',
   +dimensions: Dimensions,
   +loop?: boolean,
   +thumbnailID: string,
   +thumbnailURI: string,
+  +thumbnailThumbHash: ?string,
   // stored on native only during creation in case retry needed after state lost
   +localMediaSelection?: NativeMediaSelection,
 };
 
 export const videoValidator: TInterface<Video> = tShape<Video>({
   id: tID,
   uri: t.String,
   type: tString('video'),
   dimensions: dimensionsValidator,
   loop: t.maybe(t.Boolean),
   thumbnailID: tID,
   thumbnailURI: t.String,
+  thumbnailThumbHash: t.maybe(t.String),
   localMediaSelection: t.maybe(nativeMediaSelectionValidator),
 });
 
 export type EncryptedVideo = {
   +id: string,
   // a media URI for keyserver uploads / blob holder for Blob service uploads
   +holder: string,
   +encryptionKey: string,
   +type: 'encrypted_video',
   +dimensions: Dimensions,
   +loop?: boolean,
   +thumbnailID: string,
   +thumbnailHolder: string,
   +thumbnailEncryptionKey: string,
+  +thumbnailThumbHash: ?string,
 };
 
 export const encryptedVideoValidator: TInterface<EncryptedVideo> =
   tShape<EncryptedVideo>({
     id: tID,
     holder: t.String,
     encryptionKey: t.String,
     type: tString('encrypted_video'),
     dimensions: dimensionsValidator,
     loop: t.maybe(t.Boolean),
     thumbnailID: tID,
     thumbnailHolder: t.String,
     thumbnailEncryptionKey: t.String,
+    thumbnailThumbHash: t.maybe(t.String),
   });
 
 export type Media = Image | Video | EncryptedImage | EncryptedVideo;
 
 export const mediaValidator: TUnion<Media> = t.union([
   imageValidator,
   videoValidator,
   encryptedImageValidator,
   encryptedVideoValidator,
 ]);
diff --git a/lib/utils/message-ops-utils.js b/lib/utils/message-ops-utils.js
index b39c69e9e..002121eb6 100644
--- a/lib/utils/message-ops-utils.js
+++ b/lib/utils/message-ops-utils.js
@@ -1,343 +1,356 @@
 // @flow
 
 import _keyBy from 'lodash/fp/keyBy.js';
 
 import { contentStringForMediaArray } from '../media/media-utils.js';
 import { messageID } from '../shared/message-utils.js';
 import { messageSpecs } from '../shared/messages/message-specs.js';
 import type {
   EncryptedVideo,
   Media,
   ClientDBMediaInfo,
   Image,
   Video,
 } from '../types/media-types';
 import {
   messageTypes,
   assertMessageType,
 } from '../types/message-types-enum.js';
 import {
   type ClientDBMessageInfo,
   type RawMessageInfo,
   type MessageStoreOperation,
   type ClientDBMessageStoreOperation,
   type ClientDBThreadMessageInfo,
   type ThreadMessageInfo,
   type MessageStoreThreads,
 } from '../types/message-types.js';
 import type { MediaMessageServerDBContent } from '../types/messages/media.js';
 
 function translateMediaToClientDBMediaInfos(
   media: $ReadOnlyArray<Media>,
 ): $ReadOnlyArray<ClientDBMediaInfo> {
   const clientDBMediaInfos = [];
   for (const m of media) {
     const type =
       m.type === 'encrypted_photo'
         ? 'photo'
         : m.type === 'encrypted_video'
         ? 'video'
         : m.type;
 
     const mediaURI =
       m.type === 'encrypted_photo' || m.type === 'encrypted_video'
         ? m.holder
         : m.uri;
     clientDBMediaInfos.push({
       id: m.id,
       uri: mediaURI,
       type: type,
       extras: JSON.stringify({
         dimensions: m.dimensions,
         loop: type === 'video' ? m.loop : false,
         local_media_selection: m.localMediaSelection,
         encryption_key: m.encryptionKey,
+        thumb_hash: m.thumbHash ?? undefined,
       }),
     });
     if (m.type === 'video' || m.type === 'encrypted_video') {
       const thumbnailURI =
         m.type === 'encrypted_video' ? m.thumbnailHolder : m.thumbnailURI;
       clientDBMediaInfos.push({
         id: m.thumbnailID,
         uri: thumbnailURI,
         type: 'photo',
         extras: JSON.stringify({
           dimensions: m.dimensions,
           loop: false,
           encryption_key: m.thumbnailEncryptionKey,
+          thumb_hash: m.thumbnailThumbHash ?? undefined,
         }),
       });
     }
   }
   return clientDBMediaInfos;
 }
 
 function translateClientDBMediaInfoToImage(
   clientDBMediaInfo: ClientDBMediaInfo,
 ): Image {
-  const { dimensions, local_media_selection } = JSON.parse(
+  const { dimensions, local_media_selection, thumb_hash } = JSON.parse(
     clientDBMediaInfo.extras,
   );
 
   if (!local_media_selection) {
     return {
       id: clientDBMediaInfo.id,
       uri: clientDBMediaInfo.uri,
       type: 'photo',
       dimensions: dimensions,
+      thumbHash: thumb_hash,
     };
   }
   return {
     id: clientDBMediaInfo.id,
     uri: clientDBMediaInfo.uri,
     type: 'photo',
     dimensions: dimensions,
     localMediaSelection: local_media_selection,
+    thumbHash: thumb_hash,
   };
 }
 
 function translateClientDBMediaInfosToMedia(
   clientDBMessageInfo: ClientDBMessageInfo,
 ): $ReadOnlyArray<Media> {
   if (parseInt(clientDBMessageInfo.type) === messageTypes.IMAGES) {
     if (!clientDBMessageInfo.media_infos) {
       return [];
     }
     return clientDBMessageInfo.media_infos.map(
       translateClientDBMediaInfoToImage,
     );
   }
   if (
     !clientDBMessageInfo.media_infos ||
     clientDBMessageInfo.media_infos.length === 0
   ) {
     return [];
   }
   const mediaInfos: $ReadOnlyArray<ClientDBMediaInfo> =
     clientDBMessageInfo.media_infos;
   const mediaMap = _keyBy('id')(mediaInfos);
 
   if (!clientDBMessageInfo.content) {
     return [];
   }
   const messageContent: $ReadOnlyArray<MediaMessageServerDBContent> =
     JSON.parse(clientDBMessageInfo.content);
 
   const translatedMedia: Media[] = [];
   for (const media of messageContent) {
     if (media.type === 'photo') {
       const extras = JSON.parse(mediaMap[media.uploadID].extras);
-      const { dimensions, encryption_key: encryptionKey } = extras;
+      const {
+        dimensions,
+        encryption_key: encryptionKey,
+        thumb_hash: thumbHash,
+      } = extras;
 
       let image;
       if (encryptionKey) {
         image = {
           id: media.uploadID,
           type: 'encrypted_photo',
           holder: mediaMap[media.uploadID].uri,
           dimensions,
           encryptionKey,
+          thumbHash,
         };
       } else {
         image = {
           id: media.uploadID,
           type: 'photo',
           uri: mediaMap[media.uploadID].uri,
           dimensions,
+          thumbHash,
         };
       }
       translatedMedia.push(image);
     } else if (media.type === 'video') {
       const extras = JSON.parse(mediaMap[media.uploadID].extras);
       const {
         dimensions,
         loop,
         local_media_selection: localMediaSelection,
         encryption_key: encryptionKey,
       } = extras;
 
+      const {
+        encryption_key: thumbnailEncryptionKey,
+        thumb_hash: thumbnailThumbHash,
+      } = JSON.parse(mediaMap[media.thumbnailUploadID].extras);
       if (encryptionKey) {
-        const thumbnailEncryptionKey = JSON.parse(
-          mediaMap[media.thumbnailUploadID].extras,
-        ).encryption_key;
         const video: EncryptedVideo = {
           id: media.uploadID,
           type: 'encrypted_video',
           holder: mediaMap[media.uploadID].uri,
           dimensions,
           loop,
           encryptionKey,
           thumbnailID: media.thumbnailUploadID,
           thumbnailHolder: mediaMap[media.thumbnailUploadID].uri,
           thumbnailEncryptionKey,
+          thumbnailThumbHash,
         };
         translatedMedia.push(video);
       } else {
         const video: Video = {
           id: media.uploadID,
           uri: mediaMap[media.uploadID].uri,
           type: 'video',
           dimensions,
           loop,
           thumbnailID: media.thumbnailUploadID,
           thumbnailURI: mediaMap[media.thumbnailUploadID].uri,
+          thumbnailThumbHash,
         };
         translatedMedia.push(
           localMediaSelection ? { ...video, localMediaSelection } : video,
         );
       }
     }
   }
   return translatedMedia;
 }
 
 function translateRawMessageInfoToClientDBMessageInfo(
   rawMessageInfo: RawMessageInfo,
 ): ClientDBMessageInfo {
   return {
     id: messageID(rawMessageInfo),
     local_id: rawMessageInfo.localID ? rawMessageInfo.localID : null,
     thread: rawMessageInfo.threadID,
     user: rawMessageInfo.creatorID,
     type: rawMessageInfo.type.toString(),
     future_type:
       rawMessageInfo.type === messageTypes.UNSUPPORTED
         ? rawMessageInfo.unsupportedMessageInfo.type.toString()
         : null,
     time: rawMessageInfo.time.toString(),
     content:
       messageSpecs[rawMessageInfo.type].messageContentForClientDB?.(
         rawMessageInfo,
       ),
     media_infos:
       rawMessageInfo.type === messageTypes.IMAGES ||
       rawMessageInfo.type === messageTypes.MULTIMEDIA
         ? translateMediaToClientDBMediaInfos(rawMessageInfo.media)
         : null,
   };
 }
 
 function translateClientDBMessageInfoToRawMessageInfo(
   clientDBMessageInfo: ClientDBMessageInfo,
 ): RawMessageInfo {
   return messageSpecs[
     assertMessageType(parseInt(clientDBMessageInfo.type))
   ].rawMessageInfoFromClientDB(clientDBMessageInfo);
 }
 
 function translateClientDBMessageInfosToRawMessageInfos(
   clientDBMessageInfos: $ReadOnlyArray<ClientDBMessageInfo>,
 ): { +[id: string]: RawMessageInfo } {
   return Object.fromEntries(
     clientDBMessageInfos.map((dbMessageInfo: ClientDBMessageInfo) => [
       dbMessageInfo.id,
       translateClientDBMessageInfoToRawMessageInfo(dbMessageInfo),
     ]),
   );
 }
 
 type TranslatedThreadMessageInfos = {
   [threadID: string]: {
     startReached: boolean,
     lastNavigatedTo: number,
     lastPruned: number,
   },
 };
 function translateClientDBThreadMessageInfos(
   clientDBThreadMessageInfo: $ReadOnlyArray<ClientDBThreadMessageInfo>,
 ): TranslatedThreadMessageInfos {
   return Object.fromEntries(
     clientDBThreadMessageInfo.map((threadInfo: ClientDBThreadMessageInfo) => [
       threadInfo.id,
       {
         startReached: threadInfo.start_reached === '1',
         lastNavigatedTo: parseInt(threadInfo.last_navigated_to),
         lastPruned: parseInt(threadInfo.last_pruned),
       },
     ]),
   );
 }
 
 function translateThreadMessageInfoToClientDBThreadMessageInfo(
   id: string,
   threadMessageInfo: ThreadMessageInfo,
 ): ClientDBThreadMessageInfo {
   const startReached = threadMessageInfo.startReached ? 1 : 0;
   const lastNavigatedTo = threadMessageInfo.lastNavigatedTo ?? 0;
   const lastPruned = threadMessageInfo.lastPruned ?? 0;
   return {
     id,
     start_reached: startReached.toString(),
     last_navigated_to: lastNavigatedTo.toString(),
     last_pruned: lastPruned.toString(),
   };
 }
 
 function convertMessageStoreOperationsToClientDBOperations(
   messageStoreOperations: $ReadOnlyArray<MessageStoreOperation>,
 ): $ReadOnlyArray<ClientDBMessageStoreOperation> {
   const convertedOperations = messageStoreOperations.map(
     messageStoreOperation => {
       if (messageStoreOperation.type === 'replace') {
         return {
           type: 'replace',
           payload: translateRawMessageInfoToClientDBMessageInfo(
             messageStoreOperation.payload.messageInfo,
           ),
         };
       }
 
       if (messageStoreOperation.type !== 'replace_threads') {
         return messageStoreOperation;
       }
 
       const threadMessageInfo: MessageStoreThreads =
         messageStoreOperation.payload.threads;
       const dbThreadMessageInfos: ClientDBThreadMessageInfo[] = [];
       for (const threadID in threadMessageInfo) {
         dbThreadMessageInfos.push(
           translateThreadMessageInfoToClientDBThreadMessageInfo(
             threadID,
             threadMessageInfo[threadID],
           ),
         );
       }
       if (dbThreadMessageInfos.length === 0) {
         return undefined;
       }
       return {
         type: 'replace_threads',
         payload: {
           threads: dbThreadMessageInfos,
         },
       };
     },
   );
   return convertedOperations.filter(Boolean);
 }
 
 function getPinnedContentFromClientDBMessageInfo(
   clientDBMessageInfo: ClientDBMessageInfo,
 ): string {
   const { media_infos } = clientDBMessageInfo;
 
   let pinnedContent;
   if (!media_infos || media_infos.length === 0) {
     pinnedContent = 'a message';
   } else {
     const media = translateClientDBMediaInfosToMedia(clientDBMessageInfo);
     pinnedContent = contentStringForMediaArray(media);
   }
   return pinnedContent;
 }
 
 export {
   translateClientDBMediaInfoToImage,
   translateRawMessageInfoToClientDBMessageInfo,
   translateClientDBMessageInfoToRawMessageInfo,
   translateClientDBMessageInfosToRawMessageInfos,
   convertMessageStoreOperationsToClientDBOperations,
   translateClientDBMediaInfosToMedia,
   getPinnedContentFromClientDBMessageInfo,
   translateClientDBThreadMessageInfos,
 };
diff --git a/lib/utils/message-ops-utils.test.js b/lib/utils/message-ops-utils.test.js
index e5afbc69e..7e81d88be 100644
--- a/lib/utils/message-ops-utils.test.js
+++ b/lib/utils/message-ops-utils.test.js
@@ -1,543 +1,548 @@
 // @flow
 
 import {
   translateRawMessageInfoToClientDBMessageInfo,
   translateClientDBMessageInfoToRawMessageInfo,
   translateClientDBMediaInfosToMedia,
 } from './message-ops-utils.js';
 import type {
   ClientDBMessageInfo,
   RawSidebarSourceMessageInfo,
 } from '../types/message-types.js';
 import type { RawAddMembersMessageInfo } from '../types/messages/add-members.js';
 import type { RawChangeSettingsMessageInfo } from '../types/messages/change-settings.js';
 import type { RawCreateEntryMessageInfo } from '../types/messages/create-entry.js';
 import type { RawCreateSidebarMessageInfo } from '../types/messages/create-sidebar.js';
 import type { RawCreateSubthreadMessageInfo } from '../types/messages/create-subthread.js';
 import type { RawCreateThreadMessageInfo } from '../types/messages/create-thread.js';
 import type { RawDeleteEntryMessageInfo } from '../types/messages/delete-entry.js';
 import type { RawEditEntryMessageInfo } from '../types/messages/edit-entry.js';
 import type { RawImagesMessageInfo } from '../types/messages/images.js';
 import type { RawJoinThreadMessageInfo } from '../types/messages/join-thread.js';
 import type { RawLeaveThreadMessageInfo } from '../types/messages/leave-thread.js';
 import type { RawRemoveMembersMessageInfo } from '../types/messages/remove-members.js';
 import type { RawRestoreEntryMessageInfo } from '../types/messages/restore-entry.js';
 import type { RawTextMessageInfo } from '../types/messages/text.js';
 import type { RawUpdateRelationshipMessageInfo } from '../types/messages/update-relationship.js';
 
 test('TEXT: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawTextMessageInfo: RawTextMessageInfo = {
     type: 0,
     localID: 'local7',
     threadID: '85466',
     text: 'Hello world',
     creatorID: '85435',
     time: 1637788332565,
     id: '85551',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawTextMessageInfo),
     ),
   ).toStrictEqual(rawTextMessageInfo);
 });
 
 test('TEXT (local): rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const localRawTextMessageInfo: RawTextMessageInfo = {
     type: 0,
     localID: 'local7',
     threadID: '85466',
     text: 'Hello world',
     creatorID: '85435',
     time: 1637788332565,
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(localRawTextMessageInfo),
     ),
   ).toStrictEqual(localRawTextMessageInfo);
 });
 
 test('CREATE_THREAD: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawCreateThreadMessageInfo: RawCreateThreadMessageInfo = {
     type: 1,
     threadID: '85466',
     creatorID: '85435',
     time: 1637778853178,
     initialThreadState: {
       type: 6,
       name: null,
       parentThreadID: '1',
       color: '648CAA',
       memberIDs: ['256', '85435'],
     },
     id: '85482',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawCreateThreadMessageInfo),
     ),
   ).toStrictEqual(rawCreateThreadMessageInfo);
 });
 
 test('ADD_MEMBER: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawAddMemberMessageInfo: RawAddMembersMessageInfo = {
     type: 2,
     threadID: '85946',
     creatorID: '83809',
     time: 1638236346010,
     addedUserIDs: ['256'],
     id: '85986',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawAddMemberMessageInfo),
     ),
   ).toStrictEqual(rawAddMemberMessageInfo);
 });
 
 test('CREATE_SUB_THREAD: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawCreateSubthreadMessageInfo: RawCreateSubthreadMessageInfo = {
     type: 3,
     threadID: '85946',
     creatorID: '83809',
     time: 1638237345553,
     childThreadID: '85990',
     id: '85997',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(
         rawCreateSubthreadMessageInfo,
       ),
     ),
   ).toStrictEqual(rawCreateSubthreadMessageInfo);
 });
 
 test('CHANGE_SETTINGS: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawChangeSettingsMessageInfo: RawChangeSettingsMessageInfo = {
     type: 4,
     threadID: '85946',
     creatorID: '83809',
     time: 1638236125774,
     field: 'color',
     value: '009cc8',
     id: '85972',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(
         rawChangeSettingsMessageInfo,
       ),
     ),
   ).toStrictEqual(rawChangeSettingsMessageInfo);
 });
 
 test('REMOVE_MEMBERS: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawRemoveMembersMessageInfo: RawRemoveMembersMessageInfo = {
     type: 5,
     threadID: '85990',
     creatorID: '83809',
     time: 1638237832234,
     removedUserIDs: ['85435'],
     id: '86014',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawRemoveMembersMessageInfo),
     ),
   ).toStrictEqual(rawRemoveMembersMessageInfo);
 });
 
 test('LEAVE_THREAD: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawLeaveThreadMessageInfo: RawLeaveThreadMessageInfo = {
     type: 7,
     id: '86088',
     threadID: '85946',
     time: 1638238389038,
     creatorID: '85435',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawLeaveThreadMessageInfo),
     ),
   ).toStrictEqual(rawLeaveThreadMessageInfo);
 });
 
 test('JOIN_THREAD: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawJoinThreadMessageInfo: RawJoinThreadMessageInfo = {
     type: 8,
     threadID: '86125',
     creatorID: '85435',
     time: 1638239691665,
     id: '86149',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawJoinThreadMessageInfo),
     ),
   ).toStrictEqual(rawJoinThreadMessageInfo);
 });
 
 test('CREATE_ENTRY: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawCreateEntryMessageInfo: RawCreateEntryMessageInfo = {
     type: 9,
     threadID: '85630',
     creatorID: '85435',
     time: 1638239928303,
     entryID: '86151',
     date: '2021-11-29',
     text: 'Hello world',
     id: '86154',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawCreateEntryMessageInfo),
     ),
   ).toStrictEqual(rawCreateEntryMessageInfo);
 });
 
 test('EDIT_ENTRY: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawEditEntryMessageInfo: RawEditEntryMessageInfo = {
     type: 10,
     threadID: '85630',
     creatorID: '85435',
     time: 1638240110661,
     entryID: '86151',
     date: '2021-11-29',
     text: 'Hello universe',
     id: '86179',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawEditEntryMessageInfo),
     ),
   ).toStrictEqual(rawEditEntryMessageInfo);
 });
 
 test('DELETE_ENTRY: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawDeleteEntryMessageInfo: RawDeleteEntryMessageInfo = {
     type: 11,
     threadID: '85630',
     creatorID: '85435',
     time: 1638240286574,
     entryID: '86151',
     date: '2021-11-29',
     text: 'Hello universe',
     id: '86189',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawDeleteEntryMessageInfo),
     ),
   ).toStrictEqual(rawDeleteEntryMessageInfo);
 });
 
 test('RESTORE_ENTRY: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawRestoreEntryMessageInfo: RawRestoreEntryMessageInfo = {
     type: 12,
     threadID: '85630',
     creatorID: '83809',
     time: 1638240605195,
     entryID: '86151',
     date: '2021-11-29',
     text: 'Hello universe',
     id: '86211',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawRestoreEntryMessageInfo),
     ),
   ).toStrictEqual(rawRestoreEntryMessageInfo);
 });
 
 test('IMAGES: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawImagesMessageInfo: RawImagesMessageInfo = {
     type: 14,
     threadID: '85466',
     creatorID: '85435',
     time: 1637779260087,
     media: [
       {
         id: '85504',
         type: 'photo',
         uri: 'http://localhost/comm/upload/85504/ba36cea2b5a796f6',
         dimensions: {
           width: 1920,
           height: 1281,
         },
+        thumbHash: 'some_thumb_hash',
       },
     ],
     id: '85505',
   };
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawImagesMessageInfo),
     ),
   ).toStrictEqual(rawImagesMessageInfo);
 });
 
 test('IMAGES (local): rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const localRawImagesMessageInfo: RawImagesMessageInfo = {
     type: 14,
     threadID: '85466',
     creatorID: '85435',
     time: 1637779260087,
     media: [
       {
         id: '85504',
         type: 'photo',
         uri: 'http://localhost/comm/upload/85504/ba36cea2b5a796f6',
         dimensions: {
           width: 1920,
           height: 1281,
         },
+        thumbHash: 'some_thumb_hash',
       },
     ],
     localID: 'local123',
   };
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(localRawImagesMessageInfo),
     ),
   ).toStrictEqual(localRawImagesMessageInfo);
 });
 
 test('UPDATE_RELATIONSHIP: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawUpdateRelationshipMessageInfo: RawUpdateRelationshipMessageInfo = {
     type: 16,
     id: '85651',
     threadID: '85630',
     time: 1638235869690,
     creatorID: '83809',
     targetID: '85435',
     operation: 'request_accepted',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(
         rawUpdateRelationshipMessageInfo,
       ),
     ),
   ).toStrictEqual(rawUpdateRelationshipMessageInfo);
 });
 
 test('SIDEBAR_SOURCE: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawSidebarSourceMessageInfo: RawSidebarSourceMessageInfo = {
     type: 17,
     threadID: '86219',
     creatorID: '85435',
     time: 1638250532831,
     sourceMessage: {
       type: 0,
       id: '85486',
       threadID: '85466',
       time: 1637778853216,
       creatorID: '256',
       text: 'as you inevitably discover bugs, have feature requests, or design suggestions, feel free to message them to me in the app.',
     },
     id: '86223',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawSidebarSourceMessageInfo),
     ),
   ).toStrictEqual(rawSidebarSourceMessageInfo);
 });
 
 test('CREATE_SIDEBAR: rawMessageInfo -> clientDBMessageInfo -> rawMessageInfo', () => {
   const rawCreateSidebarMessageInfo: RawCreateSidebarMessageInfo = {
     type: 18,
     threadID: '86219',
     creatorID: '85435',
     time: 1638250532831,
     sourceMessageAuthorID: '256',
     initialThreadState: {
       name: 'as you inevitably discover ...',
       parentThreadID: '85466',
       color: 'ffffff',
       memberIDs: ['256', '85435'],
     },
     id: '86224',
   };
 
   expect(
     translateClientDBMessageInfoToRawMessageInfo(
       translateRawMessageInfoToClientDBMessageInfo(rawCreateSidebarMessageInfo),
     ),
   ).toStrictEqual(rawCreateSidebarMessageInfo);
 });
 
 test('Test translateClientDBMediaInfosToMedia(...) with one video', () => {
   const clientDBMessageInfo: ClientDBMessageInfo = {
     id: 'local0',
     local_id: 'local0',
     thread: '90145',
     user: '90134',
     type: '15',
     future_type: null,
     time: '1665014145088',
     content:
       '[{"type":"video","uploadID":"localUpload0","thumbnailUploadID":"localUpload1"}]',
     media_infos: [
       {
         id: 'localUpload0',
         uri: 'assets-library://asset/asset.mov?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=mov',
         type: 'video',
         extras:
           '{"dimensions":{"height":1010,"width":576},"loop":false,"local_media_selection":{"step":"video_library","dimensions":{"height":1010,"width":576},"uri":"assets-library://asset/asset.mov?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=mov","filename":"IMG_0007.MOV","mediaNativeID":"6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2/L0/001","duration":25.866666666666667,"selectTime":1665014144968,"sendTime":1665014144968,"retries":0}}',
       },
       {
         id: 'localUpload1',
         uri: 'assets-library://asset/asset.mov?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=mov',
         type: 'photo',
         extras: '{"dimensions":{"height":1010,"width":576},"loop":false}',
       },
     ],
   };
   const rawMessageInfo = {
     type: 15,
     threadID: '90145',
     creatorID: '90134',
     time: 1665014145088,
     media: [
       {
         id: 'localUpload0',
         uri: 'assets-library://asset/asset.mov?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=mov',
         type: 'video',
         dimensions: { height: 1010, width: 576 },
         localMediaSelection: {
           step: 'video_library',
           dimensions: { height: 1010, width: 576 },
           uri: 'assets-library://asset/asset.mov?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=mov',
           filename: 'IMG_0007.MOV',
           mediaNativeID: '6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2/L0/001',
           duration: 25.866666666666667,
           selectTime: 1665014144968,
           sendTime: 1665014144968,
           retries: 0,
         },
         loop: false,
+        thumbnailThumbHash: undefined,
         thumbnailID: 'localUpload1',
         thumbnailURI:
           'assets-library://asset/asset.mov?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=mov',
       },
     ],
     localID: 'local0',
   };
   expect(translateClientDBMediaInfosToMedia(clientDBMessageInfo)).toStrictEqual(
     rawMessageInfo.media,
   );
 });
 
 test('Test translateClientDBMediaInfosToMedia() with encrypted photo', () => {
   const clientDBMessageInfo: ClientDBMessageInfo = {
     id: 'local0',
     local_id: 'local0',
     thread: '90145',
     user: '90134',
     type: '15',
     future_type: null,
     time: '1665014145088',
     content: '[{"type":"photo","uploadID":"localUpload0"}]',
     media_infos: [
       {
         id: 'localUpload0',
         uri: 'assets-library://asset/asset.jpeg?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=jpeg',
         type: 'photo',
         extras:
-          '{"dimensions":{"height":1010,"width":576},"loop":false,"encryption_key":"someKey"}',
+          '{"dimensions":{"height":1010,"width":576},"loop":false,"encryption_key":"someKey","thumb_hash":"thumb"}',
       },
     ],
   };
   const rawMessageInfo = {
     type: 15,
     threadID: '90145',
     creatorID: '90134',
     time: 1665014145088,
     media: [
       {
         id: 'localUpload0',
         type: 'encrypted_photo',
         holder:
           'assets-library://asset/asset.jpeg?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=jpeg',
         encryptionKey: 'someKey',
         dimensions: { height: 1010, width: 576 },
+        thumbHash: 'thumb',
       },
     ],
     localID: 'local0',
   };
   expect(translateClientDBMediaInfosToMedia(clientDBMessageInfo)).toStrictEqual(
     rawMessageInfo.media,
   );
 });
 
 test('Test translateClientDBMediaInfosToMedia() with encrypted video', () => {
   const clientDBMessageInfo: ClientDBMessageInfo = {
     id: 'local0',
     local_id: 'local0',
     thread: '90145',
     user: '90134',
     type: '15',
     future_type: null,
     time: '1665014145088',
     content:
       '[{"type":"video","uploadID":"localUpload0","thumbnailUploadID":"localUpload1"}]',
     media_infos: [
       {
         id: 'localUpload0',
         uri: 'assets-library://asset/asset.mov?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=mov',
         type: 'video',
         extras:
           '{"dimensions":{"height":1010,"width":576},"loop":false,"encryption_key":"someVideoKey"}',
       },
       {
         id: 'localUpload1',
         uri: 'assets-library://asset/asset.jpeg?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=jpeg',
         type: 'photo',
         extras:
-          '{"dimensions":{"height":1010,"width":576},"loop":false,"encryption_key":"someThumbKey"}',
+          '{"dimensions":{"height":1010,"width":576},"loop":false,"encryption_key":"someThumbKey","thumb_hash":"thumb"}',
       },
     ],
   };
   const rawMessageInfo = {
     type: 15,
     threadID: '90145',
     creatorID: '90134',
     time: 1665014145088,
     media: [
       {
         id: 'localUpload0',
         type: 'encrypted_video',
         holder:
           'assets-library://asset/asset.mov?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=mov',
         encryptionKey: 'someVideoKey',
         dimensions: { height: 1010, width: 576 },
         loop: false,
         thumbnailID: 'localUpload1',
         thumbnailHolder:
           'assets-library://asset/asset.jpeg?id=6F1BEA56-3875-474C-B3AF-B11DEDCBAFF2&ext=jpeg',
         thumbnailEncryptionKey: 'someThumbKey',
+        thumbnailThumbHash: 'thumb',
       },
     ],
     localID: 'local0',
   };
   expect(translateClientDBMediaInfosToMedia(clientDBMessageInfo)).toStrictEqual(
     rawMessageInfo.media,
   );
 });
diff --git a/native/input/input-state-container.react.js b/native/input/input-state-container.react.js
index b169f699e..8bec59ca8 100644
--- a/native/input/input-state-container.react.js
+++ b/native/input/input-state-container.react.js
@@ -1,1825 +1,1852 @@
 // @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 {
   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 } = processedMedia;
+        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,
+      +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 } = input;
+    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,
     };
     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/multimedia.react.js b/native/media/multimedia.react.js
index df41e4499..f0bfc4994 100644
--- a/native/media/multimedia.react.js
+++ b/native/media/multimedia.react.js
@@ -1,213 +1,223 @@
 // @flow
 
 import { Image } from 'expo-image';
 import invariant from 'invariant';
 import _isEqual from 'lodash/fp/isEqual.js';
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import type { MediaInfo, AvatarMediaInfo } from 'lib/types/media-types.js';
 
 import EncryptedImage from './encrypted-image.react.js';
 import RemoteImage from './remote-image.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 
 type Source =
   | {
       +kind: 'uri',
       +uri: string,
       +thumbHash?: ?string,
     }
   | {
       +kind: 'encrypted',
       +holder: string,
       +encryptionKey: string,
       +thumbHash?: ?string,
     };
 type BaseProps = {
   +mediaInfo: MediaInfo | AvatarMediaInfo,
   +spinnerColor: string,
 };
 type Props = {
   ...BaseProps,
   // withInputState
   +inputState: ?InputState,
 };
 type State = {
   +currentSource: Source,
   +departingSource: ?Source,
 };
 class Multimedia extends React.PureComponent<Props, State> {
   static defaultProps = {
     spinnerColor: 'black',
   };
 
   constructor(props: Props) {
     super(props);
 
     this.state = {
       currentSource: Multimedia.sourceFromMediaInfo(props.mediaInfo),
       departingSource: null,
     };
   }
 
   get inputState() {
     const { inputState } = this.props;
     invariant(inputState, 'inputState should be set in Multimedia');
     return inputState;
   }
 
   componentDidMount() {
     this.reportSourceDisplayed(this.state.currentSource, true);
   }
 
   componentWillUnmount() {
     const { currentSource, departingSource } = this.state;
     this.reportSourceDisplayed(currentSource, false);
     if (departingSource) {
       this.reportSourceDisplayed(departingSource, false);
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const newSource = Multimedia.sourceFromMediaInfo(this.props.mediaInfo);
     const oldSource = this.state.currentSource;
     if (!_isEqual(newSource)(oldSource)) {
       this.reportSourceDisplayed(newSource, true);
 
       const { departingSource } = this.state;
       if (departingSource && !_isEqual(oldSource)(departingSource)) {
         // If there's currently an existing departingSource, that means that
         // oldSource hasn't loaded yet. Since it's being replaced anyways
         // we don't need to display it anymore, so we can unlink it now
         this.reportSourceDisplayed(oldSource, false);
         this.setState({ currentSource: newSource });
       } else {
         this.setState({ currentSource: newSource, departingSource: oldSource });
       }
     }
 
     const newDepartingSource = this.state.departingSource;
     const oldDepartingSource = prevState.departingSource;
     if (
       oldDepartingSource &&
       !_isEqual(oldDepartingSource)(newDepartingSource)
     ) {
       this.reportSourceDisplayed(oldDepartingSource, false);
     }
   }
 
   render() {
     const images = [];
     const { currentSource, departingSource } = this.state;
     if (departingSource) {
       images.push(this.renderSource(currentSource, true));
       images.push(this.renderSource(departingSource, false, false));
     } else {
       images.push(this.renderSource(currentSource));
     }
     return <View style={styles.container}>{images}</View>;
   }
 
   renderSource(
     source: Source,
     invisibleLoad?: boolean = false,
     triggerOnLoad?: boolean = true,
   ) {
     const onLoadProp = triggerOnLoad ? this.onLoad : undefined;
     if (source.kind === 'encrypted') {
       return (
         <EncryptedImage
           thumbHash={source.thumbHash}
           holder={source.holder}
           encryptionKey={source.encryptionKey}
           onLoad={onLoadProp}
           spinnerColor={this.props.spinnerColor}
           style={styles.image}
           invisibleLoad={invisibleLoad}
           key={source.holder}
         />
       );
     }
     const { uri, thumbHash } = source;
     const placeholder = thumbHash ? { thumbhash: thumbHash } : null;
     if (uri.startsWith('http')) {
       return (
         <RemoteImage
           uri={uri}
           onLoad={onLoadProp}
           placeholder={placeholder}
           spinnerColor={this.props.spinnerColor}
           style={styles.image}
           invisibleLoad={invisibleLoad}
           key={uri}
         />
       );
     } else {
       return (
         <Image
           source={{ uri }}
           onLoad={onLoadProp}
           placeholder={placeholder}
           style={styles.image}
           key={uri}
         />
       );
     }
   }
 
   onLoad = () => {
     this.setState({ departingSource: null });
   };
 
   reportSourceDisplayed = (source: Source, isLoaded: boolean) => {
     if (source.kind === 'uri') {
       this.inputState.reportURIDisplayed(source.uri, isLoaded);
     }
   };
 
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   static sourceFromMediaInfo(mediaInfo: MediaInfo | AvatarMediaInfo): Source {
     if (mediaInfo.type === 'photo') {
-      return { kind: 'uri', uri: mediaInfo.uri };
+      return {
+        kind: 'uri',
+        uri: mediaInfo.uri,
+        thumbHash: mediaInfo.thumbHash,
+      };
     } else if (mediaInfo.type === 'video') {
-      return { kind: 'uri', uri: mediaInfo.thumbnailURI };
+      return {
+        kind: 'uri',
+        uri: mediaInfo.thumbnailURI,
+        thumbHash: mediaInfo.thumbnailThumbHash,
+      };
     } else if (mediaInfo.type === 'encrypted_photo') {
       return {
         kind: 'encrypted',
         holder: mediaInfo.holder,
         encryptionKey: mediaInfo.encryptionKey,
+        thumbHash: mediaInfo.thumbHash,
       };
     } else if (mediaInfo.type === 'encrypted_video') {
       return {
         kind: 'encrypted',
         holder: mediaInfo.thumbnailHolder,
         encryptionKey: mediaInfo.thumbnailEncryptionKey,
+        thumbHash: mediaInfo.thumbnailThumbHash,
       };
     } else {
       invariant(false, 'Invalid mediaInfo type');
     }
   }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
   image: {
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
 });
 
 const ConnectedMultimedia: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedMultimedia(props: BaseProps) {
     const inputState = React.useContext(InputStateContext);
     return <Multimedia {...props} inputState={inputState} />;
   });
 
 export default ConnectedMultimedia;
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index 82b9b674d..60d30fb79 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1744 +1,1746 @@
 // @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 {
   type PendingMultimediaUpload,
   type TypeaheadState,
   InputStateContext,
 } from './input-state.js';
 import { encryptFile } from '../media/encryption-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 }) => {
           // We can get into this state where dimensions are null if the user is
           // uploading a file type that the browser can't render. In that case
           // we fake the dimensions here while we wait for the server to tell us
           // the true dimensions. We actually don't use the dimensions on the
           // web side currently, but if we ever change that (for instance if we
           // want to render a properly sized loading overlay like we do on
           // native), 0,0 is probably a good default.
           const shimmedDimensions = dimensions ?? { height: 0, width: 0 };
           invariant(
             mediaType === 'photo' || 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: null,
             };
           }
           invariant(
             encryptionKey,
             'encrypted media must have an encryption key',
           );
           return {
             id: serverID ? serverID : localID,
             holder: uri,
             type: 'encrypted_photo',
             encryptionKey,
             dimensions: shimmedDimensions,
+            thumbHash: null,
           };
         },
       );
       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 };
     }
 
     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,
           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 } = upload;
         invariant(
           encryptionKey && blobHash && dimensions,
           'incomplete encrypted upload',
         );
         uploadResult = await this.blobServiceUpload(
           {
             file: upload.file,
             blobHash,
             encryptionKey,
             dimensions,
             loop: false,
           },
           { ...callbacks },
         );
       } else {
         let uploadExtras = { ...upload.dimensions, loop: false };
         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;
       let mediaUpdate;
       if (!isEncrypted) {
         mediaUpdate = { type: mediaType, uri, dimensions, loop };
       } else {
         mediaUpdate = {
           type: outputMediaType,
           holder: uri,
           encryptionKey,
           dimensions,
           loop,
         };
       }
       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,
     },
     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,
     });
   }
 
   handleAbortCallback(
     threadID: string,
     localUploadID: string,
     abort: () => void,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been cancelled before we were even handed the
         // abort function. We should immediately abort.
         abort();
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               abort,
             },
           },
         },
       };
     });
   }
 
   handleUploadFailure(threadID: string, localUploadID: string) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload || !upload.abort || upload.serverID) {
         // The upload has been cancelled or completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
               abort: null,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReports(
     partials: $ReadOnlyArray<{
       mediaMission: MediaMission,
       uploadLocalID?: ?string,
       uploadServerID?: ?string,
       messageLocalID?: ?string,
     }>,
   ) {
     const reports = partials.map(
       ({ mediaMission, uploadLocalID, uploadServerID, messageLocalID }) => ({
         type: reportTypes.MEDIA_MISSION,
         time: Date.now(),
         platformDetails: getConfig().platformDetails,
         mediaMission,
         uploadServerID,
         uploadLocalID,
         messageLocalID,
       }),
     );
     this.props.dispatch({ type: queueReportsActionType, payload: { reports } });
   }
 
   cancelPendingUpload(threadID: ?string, localUploadID: string) {
     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;