diff --git a/lib/actions/message-actions.js b/lib/actions/message-actions.js
index f589a6417..cd434f5d1 100644
--- a/lib/actions/message-actions.js
+++ b/lib/actions/message-actions.js
@@ -1,263 +1,264 @@
 // @flow
 
 import invariant from 'invariant';
 
 import type {
   FetchMessageInfosPayload,
   SendMessageResult,
   SendReactionMessageRequest,
   SimpleMessagesPayload,
 } from '../types/message-types.js';
 import type { MediaMessageServerDBContent } from '../types/messages/media.js';
 import type {
   CallServerEndpoint,
   CallServerEndpointResultInfo,
 } from '../utils/call-server-endpoint.js';
 
 const fetchMessagesBeforeCursorActionTypes = Object.freeze({
   started: 'FETCH_MESSAGES_BEFORE_CURSOR_STARTED',
   success: 'FETCH_MESSAGES_BEFORE_CURSOR_SUCCESS',
   failed: 'FETCH_MESSAGES_BEFORE_CURSOR_FAILED',
 });
 const fetchMessagesBeforeCursor =
   (
     callServerEndpoint: CallServerEndpoint,
   ): ((
     threadID: string,
     beforeMessageID: string,
   ) => Promise<FetchMessageInfosPayload>) =>
   async (threadID, beforeMessageID) => {
     const response = await callServerEndpoint('fetch_messages', {
       cursors: {
         [threadID]: beforeMessageID,
       },
     });
     return {
       threadID,
       rawMessageInfos: response.rawMessageInfos,
       truncationStatus: response.truncationStatuses[threadID],
     };
   };
 
 const fetchMostRecentMessagesActionTypes = Object.freeze({
   started: 'FETCH_MOST_RECENT_MESSAGES_STARTED',
   success: 'FETCH_MOST_RECENT_MESSAGES_SUCCESS',
   failed: 'FETCH_MOST_RECENT_MESSAGES_FAILED',
 });
 const fetchMostRecentMessages =
   (
     callServerEndpoint: CallServerEndpoint,
   ): ((threadID: string) => Promise<FetchMessageInfosPayload>) =>
   async threadID => {
     const response = await callServerEndpoint('fetch_messages', {
       cursors: {
         [threadID]: null,
       },
     });
     return {
       threadID,
       rawMessageInfos: response.rawMessageInfos,
       truncationStatus: response.truncationStatuses[threadID],
     };
   };
 
 const fetchSingleMostRecentMessagesFromThreadsActionTypes = Object.freeze({
   started: 'FETCH_SINGLE_MOST_RECENT_MESSAGES_FROM_THREADS_STARTED',
   success: 'FETCH_SINGLE_MOST_RECENT_MESSAGES_FROM_THREADS_SUCCESS',
   failed: 'FETCH_SINGLE_MOST_RECENT_MESSAGES_FROM_THREADS_FAILED',
 });
 const fetchSingleMostRecentMessagesFromThreads =
   (
     callServerEndpoint: CallServerEndpoint,
   ): ((threadIDs: $ReadOnlyArray<string>) => Promise<SimpleMessagesPayload>) =>
   async threadIDs => {
     const cursors = Object.fromEntries(
       threadIDs.map(threadID => [threadID, null]),
     );
     const response = await callServerEndpoint('fetch_messages', {
       cursors,
       numberPerThread: 1,
     });
     return {
       rawMessageInfos: response.rawMessageInfos,
       truncationStatuses: response.truncationStatuses,
     };
   };
 
 const sendTextMessageActionTypes = Object.freeze({
   started: 'SEND_TEXT_MESSAGE_STARTED',
   success: 'SEND_TEXT_MESSAGE_SUCCESS',
   failed: 'SEND_TEXT_MESSAGE_FAILED',
 });
 const sendTextMessage =
   (
     callServerEndpoint: CallServerEndpoint,
   ): ((
     threadID: string,
     localID: string,
     text: string,
+    sidebarCreation?: boolean,
   ) => Promise<SendMessageResult>) =>
-  async (threadID, localID, text) => {
+  async (threadID, localID, text, sidebarCreation) => {
     let resultInfo;
     const getResultInfo = (passedResultInfo: CallServerEndpointResultInfo) => {
       resultInfo = passedResultInfo;
     };
-    const response = await callServerEndpoint(
-      'create_text_message',
-      {
-        threadID,
-        localID,
-        text,
-      },
-      { getResultInfo },
-    );
+    let payload = { threadID, localID, text };
+    if (sidebarCreation) {
+      payload = { ...payload, sidebarCreation };
+    }
+    const response = await callServerEndpoint('create_text_message', payload, {
+      getResultInfo,
+    });
     const resultInterface = resultInfo?.interface;
     invariant(
       resultInterface,
       'getResultInfo not called before callServerEndpoint resolves',
     );
     return {
       id: response.newMessageInfo.id,
       time: response.newMessageInfo.time,
       interface: resultInterface,
     };
   };
 
 const createLocalMessageActionType = 'CREATE_LOCAL_MESSAGE';
 
 const sendMultimediaMessageActionTypes = Object.freeze({
   started: 'SEND_MULTIMEDIA_MESSAGE_STARTED',
   success: 'SEND_MULTIMEDIA_MESSAGE_SUCCESS',
   failed: 'SEND_MULTIMEDIA_MESSAGE_FAILED',
 });
 const sendMultimediaMessage =
   (
     callServerEndpoint: CallServerEndpoint,
   ): ((
     threadID: string,
     localID: string,
     mediaMessageContents: $ReadOnlyArray<MediaMessageServerDBContent>,
+    sidebarCreation?: boolean,
   ) => Promise<SendMessageResult>) =>
-  async (threadID, localID, mediaMessageContents) => {
+  async (threadID, localID, mediaMessageContents, sidebarCreation) => {
     let resultInfo;
     const getResultInfo = (passedResultInfo: CallServerEndpointResultInfo) => {
       resultInfo = passedResultInfo;
     };
+    let payload = { threadID, localID, mediaMessageContents };
+    if (sidebarCreation) {
+      payload = { ...payload, sidebarCreation };
+    }
     const response = await callServerEndpoint(
       'create_multimedia_message',
-      {
-        threadID,
-        localID,
-        mediaMessageContents,
-      },
+      payload,
       { getResultInfo },
     );
     const resultInterface = resultInfo?.interface;
     invariant(
       resultInterface,
       'getResultInfo not called before callServerEndpoint resolves',
     );
     return {
       id: response.newMessageInfo.id,
       time: response.newMessageInfo.time,
       interface: resultInterface,
     };
   };
 
 const legacySendMultimediaMessage =
   (
     callServerEndpoint: CallServerEndpoint,
   ): ((
     threadID: string,
     localID: string,
     mediaIDs: $ReadOnlyArray<string>,
+    sidebarCreation?: boolean,
   ) => Promise<SendMessageResult>) =>
-  async (threadID, localID, mediaIDs) => {
+  async (threadID, localID, mediaIDs, sidebarCreation) => {
     let resultInfo;
     const getResultInfo = (passedResultInfo: CallServerEndpointResultInfo) => {
       resultInfo = passedResultInfo;
     };
+    let payload = { threadID, localID, mediaIDs };
+    if (sidebarCreation) {
+      payload = { ...payload, sidebarCreation };
+    }
     const response = await callServerEndpoint(
       'create_multimedia_message',
-      {
-        threadID,
-        localID,
-        mediaIDs,
-      },
+      payload,
       { getResultInfo },
     );
     const resultInterface = resultInfo?.interface;
     invariant(
       resultInterface,
       'getResultInfo not called before callServerEndpoint resolves',
     );
     return {
       id: response.newMessageInfo.id,
       time: response.newMessageInfo.time,
       interface: resultInterface,
     };
   };
 
 const sendReactionMessageActionTypes = Object.freeze({
   started: 'SEND_REACTION_MESSAGE_STARTED',
   success: 'SEND_REACTION_MESSAGE_SUCCESS',
   failed: 'SEND_REACTION_MESSAGE_FAILED',
 });
 const sendReactionMessage =
   (
     callServerEndpoint: CallServerEndpoint,
   ): ((request: SendReactionMessageRequest) => Promise<SendMessageResult>) =>
   async request => {
     let resultInfo;
     const getResultInfo = (passedResultInfo: CallServerEndpointResultInfo) => {
       resultInfo = passedResultInfo;
     };
 
     const response = await callServerEndpoint(
       'create_reaction_message',
       {
         threadID: request.threadID,
         localID: request.localID,
         targetMessageID: request.targetMessageID,
         reaction: request.reaction,
         action: request.action,
       },
       { getResultInfo },
     );
 
     const resultInterface = resultInfo?.interface;
     invariant(
       resultInterface,
       'getResultInfo not called before callServerEndpoint resolves',
     );
 
     return {
       id: response.newMessageInfo.id,
       time: response.newMessageInfo.time,
       interface: resultInterface,
     };
   };
 
 const saveMessagesActionType = 'SAVE_MESSAGES';
 const processMessagesActionType = 'PROCESS_MESSAGES';
 const messageStorePruneActionType = 'MESSAGE_STORE_PRUNE';
 
 export {
   fetchMessagesBeforeCursorActionTypes,
   fetchMessagesBeforeCursor,
   fetchMostRecentMessagesActionTypes,
   fetchMostRecentMessages,
   fetchSingleMostRecentMessagesFromThreadsActionTypes,
   fetchSingleMostRecentMessagesFromThreads,
   sendTextMessageActionTypes,
   sendTextMessage,
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   sendMultimediaMessage,
   legacySendMultimediaMessage,
   sendReactionMessageActionTypes,
   sendReactionMessage,
   saveMessagesActionType,
   processMessagesActionType,
   messageStorePruneActionType,
 };
diff --git a/lib/shared/thread-utils.js b/lib/shared/thread-utils.js
index fc8392aab..ab762252f 100644
--- a/lib/shared/thread-utils.js
+++ b/lib/shared/thread-utils.js
@@ -1,1569 +1,1574 @@
 // @flow
 
 import invariant from 'invariant';
 import _find from 'lodash/fp/find.js';
 import * as React from 'react';
 import stringHash from 'string-hash';
 import tinycolor from 'tinycolor2';
 
 import { type ParserRules } from './markdown.js';
 import { extractMentionsFromText } from './mention-utils.js';
 import { getMessageTitle } from './message-utils.js';
 import { relationshipBlockedInEitherDirection } from './relationship-utils.js';
 import threadWatcher from './thread-watcher.js';
 import {
   fetchMostRecentMessagesActionTypes,
   fetchMostRecentMessages,
 } from '../actions/message-actions.js';
 import {
   changeThreadMemberRolesActionTypes,
   newThreadActionTypes,
   removeUsersFromThreadActionTypes,
 } from '../actions/thread-actions.js';
 import { searchUsers as searchUserCall } from '../actions/user-actions.js';
 import ashoat from '../facts/ashoat.js';
 import genesis from '../facts/genesis.js';
 import { useLoggedInUserInfo } from '../hooks/account-hooks.js';
 import {
   permissionLookup,
   getAllThreadPermissions,
   makePermissionsBlob,
 } from '../permissions/thread-permissions.js';
 import type {
   ChatThreadItem,
   ChatMessageInfoItem,
 } from '../selectors/chat-selectors.js';
 import { useGlobalThreadSearchIndex } from '../selectors/nav-selectors.js';
 import {
   threadInfoSelector,
   pendingToRealizedThreadIDsSelector,
 } from '../selectors/thread-selectors.js';
 import {
   getRelativeMemberInfos,
   usersWithPersonalThreadSelector,
 } from '../selectors/user-selectors.js';
 import type { CalendarQuery } from '../types/entry-types.js';
 import {
   type RobotextMessageInfo,
   type ComposableMessageInfo,
   messageTypes,
 } from '../types/message-types.js';
 import { userRelationshipStatus } from '../types/relationship-types.js';
 import {
   type RawThreadInfo,
   type ThreadInfo,
   type ThreadPermission,
   type MemberInfo,
   type ServerThreadInfo,
   type RelativeMemberInfo,
   type ThreadCurrentUserInfo,
   type RoleInfo,
   type ServerMemberInfo,
   type ThreadPermissionsInfo,
   type ThreadType,
   type ClientNewThreadRequest,
   type NewThreadResult,
   type ChangeThreadSettingsPayload,
   threadTypes,
   threadPermissions,
   threadTypeIsCommunityRoot,
   assertThreadType,
 } from '../types/thread-types.js';
 import { type ClientUpdateInfo, updateTypes } from '../types/update-types.js';
 import type {
   GlobalAccountUserInfo,
   UserInfos,
   AccountUserInfo,
   LoggedInUserInfo,
 } from '../types/user-types.js';
 import {
   useDispatchActionPromise,
   useServerCall,
 } from '../utils/action-utils.js';
 import type { DispatchActionPromise } from '../utils/action-utils.js';
 import type { GetENSNames } from '../utils/ens-helpers.js';
 import {
   ET,
   entityTextToRawString,
   getEntityTextAsString,
   type ThreadEntity,
 } from '../utils/entity-text.js';
 import { values } from '../utils/objects.js';
 import { useSelector } from '../utils/redux-utils.js';
 import { firstLine } from '../utils/string-utils.js';
 import { trimText } from '../utils/text-utils.js';
 
 const chatNameMaxLength = 191;
 const chatNameMinLength = 0;
 const secondCharRange = `{${chatNameMinLength},${chatNameMaxLength}}`;
 const validChatNameRegexString = `^.${secondCharRange}$`;
 const validChatNameRegex: RegExp = new RegExp(validChatNameRegexString);
 
 function colorIsDark(color: string): boolean {
   return tinycolor(`#${color}`).isDark();
 }
 
 const selectedThreadColorsObj = Object.freeze({
   a: '4b87aa',
   b: '5c9f5f',
   c: 'b8753d',
   d: 'aa4b4b',
   e: '6d49ab',
   f: 'c85000',
   g: '008f83',
   h: '648caa',
   i: '57697f',
   j: '575757',
 });
 
 const selectedThreadColors: $ReadOnlyArray<string> = values(
   selectedThreadColorsObj,
 );
 export type SelectedThreadColors = $Values<typeof selectedThreadColorsObj>;
 
 function generateRandomColor(): string {
   return selectedThreadColors[
     Math.floor(Math.random() * selectedThreadColors.length)
   ];
 }
 
 function generatePendingThreadColor(userIDs: $ReadOnlyArray<string>): string {
   const ids = [...userIDs].sort().join('#');
   const colorIdx = stringHash(ids) % selectedThreadColors.length;
   return selectedThreadColors[colorIdx];
 }
 
 function threadHasPermission(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
   permission: ThreadPermission,
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   invariant(
     !permissionsDisabledByBlock.has(permission) || threadInfo?.uiName,
     `${permission} can be disabled by a block, but threadHasPermission can't ` +
       'check for a block on RawThreadInfo. Please pass in ThreadInfo instead!',
   );
   if (!threadInfo.currentUser.permissions[permission]) {
     return false;
   }
   return threadInfo.currentUser.permissions[permission].value;
 }
 
 function viewerIsMember(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(
     threadInfo &&
     threadInfo.currentUser.role !== null &&
     threadInfo.currentUser.role !== undefined
   );
 }
 
 function threadIsInHome(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(threadInfo && threadInfo.currentUser.subscription.home);
 }
 
 // Can have messages
 function threadInChatList(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return (
     viewerIsMember(threadInfo) &&
     threadHasPermission(threadInfo, threadPermissions.VISIBLE)
   );
 }
 
 function threadIsTopLevel(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return threadInChatList(threadInfo) && threadIsChannel(threadInfo);
 }
 
 function threadIsChannel(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(threadInfo && threadInfo.type !== threadTypes.SIDEBAR);
 }
 
 function threadIsSidebar(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return threadInfo?.type === threadTypes.SIDEBAR;
 }
 
 function threadInBackgroundChatList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return threadInChatList(threadInfo) && !threadIsInHome(threadInfo);
 }
 
 function threadInHomeChatList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return threadInChatList(threadInfo) && threadIsInHome(threadInfo);
 }
 
 // Can have Calendar entries,
 // does appear as a top-level entity in the thread list
 function threadInFilterList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return (
     threadInChatList(threadInfo) &&
     !!threadInfo &&
     threadInfo.type !== threadTypes.SIDEBAR
   );
 }
 
 function userIsMember(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
   userID: string,
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   if (threadInfo.id === genesis.id) {
     return true;
   }
   return threadInfo.members.some(member => member.id === userID && member.role);
 }
 
 function threadActualMembers(
   memberInfos: $ReadOnlyArray<MemberInfo | RelativeMemberInfo>,
 ): $ReadOnlyArray<string> {
   return memberInfos
     .filter(memberInfo => memberInfo.role)
     .map(memberInfo => memberInfo.id);
 }
 
 function threadOtherMembers<T: MemberInfo | RelativeMemberInfo>(
   memberInfos: $ReadOnlyArray<T>,
   viewerID: ?string,
 ): $ReadOnlyArray<T> {
   return memberInfos.filter(
     memberInfo => memberInfo.role && memberInfo.id !== viewerID,
   );
 }
 
 function threadMembersWithoutAddedAshoat<T: ThreadInfo | RawThreadInfo>(
   threadInfo: T,
 ): $PropertyType<T, 'members'> {
   if (threadInfo.community !== genesis.id) {
     return threadInfo.members;
   }
   return threadInfo.members.filter(
     member => member.id !== ashoat.id || member.role,
   );
 }
 
 function threadIsGroupChat(threadInfo: ThreadInfo | RawThreadInfo): boolean {
   return (
     threadMembersWithoutAddedAshoat(threadInfo).filter(
       member =>
         member.role || member.permissions[threadPermissions.VOICED]?.value,
     ).length > 2
   );
 }
 
 function threadOrParentThreadIsGroupChat(
   threadInfo: RawThreadInfo | ThreadInfo,
 ) {
   return threadMembersWithoutAddedAshoat(threadInfo).length > 2;
 }
 
 function threadIsPending(threadID: ?string): boolean {
   return !!threadID?.startsWith('pending');
 }
 
+function threadIsPendingSidebar(threadID: ?string): boolean {
+  return !!threadID?.startsWith('pending/sidebar/');
+}
+
 function getSingleOtherUser(
   threadInfo: ThreadInfo | RawThreadInfo,
   viewerID: ?string,
 ): ?string {
   if (!viewerID) {
     return undefined;
   }
   const otherMembers = threadOtherMembers(threadInfo.members, viewerID);
   if (otherMembers.length !== 1) {
     return undefined;
   }
   return otherMembers[0].id;
 }
 
 function getPendingThreadID(
   threadType: ThreadType,
   memberIDs: $ReadOnlyArray<string>,
   sourceMessageID: ?string,
 ): string {
   const pendingThreadKey = sourceMessageID
     ? `sidebar/${sourceMessageID}`
     : [...memberIDs].sort().join('+');
   const pendingThreadTypeString = sourceMessageID ? '' : `type${threadType}/`;
   return `pending/${pendingThreadTypeString}${pendingThreadKey}`;
 }
 
 const pendingThreadIDRegex =
   'pending/(type[0-9]+/[0-9]+(\\+[0-9]+)*|sidebar/[0-9]+)';
 
 type PendingThreadIDContents = {
   +threadType: ThreadType,
   +memberIDs: $ReadOnlyArray<string>,
   +sourceMessageID: ?string,
 };
 
 function parsePendingThreadID(
   pendingThreadID: string,
 ): ?PendingThreadIDContents {
   const pendingRegex = new RegExp(`^${pendingThreadIDRegex}$`);
   const pendingThreadIDMatches = pendingRegex.exec(pendingThreadID);
   if (!pendingThreadIDMatches) {
     return null;
   }
   const [threadTypeString, threadKey] = pendingThreadIDMatches[1].split('/');
   const threadType =
     threadTypeString === 'sidebar'
       ? threadTypes.SIDEBAR
       : assertThreadType(Number(threadTypeString.replace('type', '')));
   const memberIDs = threadTypeString === 'sidebar' ? [] : threadKey.split('+');
   const sourceMessageID = threadTypeString === 'sidebar' ? threadKey : null;
   return {
     threadType,
     memberIDs,
     sourceMessageID,
   };
 }
 
 type UserIDAndUsername = {
   +id: string,
   +username: string,
   ...
 };
 type CreatePendingThreadArgs = {
   +viewerID: string,
   +threadType: ThreadType,
   +members: $ReadOnlyArray<UserIDAndUsername>,
   +parentThreadInfo?: ?ThreadInfo,
   +threadColor?: ?string,
   +name?: ?string,
   +sourceMessageID?: string,
 };
 
 function createPendingThread({
   viewerID,
   threadType,
   members,
   parentThreadInfo,
   threadColor,
   name,
   sourceMessageID,
 }: CreatePendingThreadArgs): ThreadInfo {
   const now = Date.now();
   if (!members.some(member => member.id === viewerID)) {
     throw new Error(
       'createPendingThread should be called with the viewer as a member',
     );
   }
 
   const memberIDs = members.map(member => member.id);
   const threadID = getPendingThreadID(threadType, memberIDs, sourceMessageID);
 
   const permissions = {
     [threadPermissions.KNOW_OF]: true,
     [threadPermissions.VISIBLE]: true,
     [threadPermissions.VOICED]: true,
   };
 
   const membershipPermissions = getAllThreadPermissions(
     makePermissionsBlob(permissions, null, threadID, threadType),
     threadID,
   );
   const role = {
     id: `${threadID}/role`,
     name: 'Members',
     permissions,
     isDefault: true,
   };
 
   const rawThreadInfo = {
     id: threadID,
     type: threadType,
     name: name ?? null,
     description: null,
     color: threadColor ?? generatePendingThreadColor(memberIDs),
     creationTime: now,
     parentThreadID: parentThreadInfo?.id ?? null,
     containingThreadID: getContainingThreadID(parentThreadInfo, threadType),
     community: getCommunity(parentThreadInfo),
     members: members.map(member => ({
       id: member.id,
       role: role.id,
       permissions: membershipPermissions,
       isSender: false,
     })),
     roles: {
       [role.id]: role,
     },
     currentUser: {
       role: role.id,
       permissions: membershipPermissions,
       subscription: {
         pushNotifs: false,
         home: false,
       },
       unread: false,
     },
     repliesCount: 0,
     sourceMessageID,
   };
 
   const userInfos = {};
   for (const member of members) {
     const { id, username } = member;
     userInfos[id] = { id, username };
   }
 
   return threadInfoFromRawThreadInfo(rawThreadInfo, viewerID, userInfos);
 }
 
 function createPendingThreadItem(
   loggedInUserInfo: LoggedInUserInfo,
   user: UserIDAndUsername,
 ): ChatThreadItem {
   const threadInfo = createPendingThread({
     viewerID: loggedInUserInfo.id,
     threadType: threadTypes.PERSONAL,
     members: [loggedInUserInfo, user],
   });
 
   return {
     type: 'chatThreadItem',
     threadInfo,
     mostRecentMessageInfo: null,
     mostRecentNonLocalMessage: null,
     lastUpdatedTime: threadInfo.creationTime,
     lastUpdatedTimeIncludingSidebars: threadInfo.creationTime,
     sidebars: [],
     pendingPersonalThreadUserInfo: {
       id: user.id,
       username: user.username,
     },
   };
 }
 
 type SharedCreatePendingSidebarInput = {
   +sourceMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
   +parentThreadInfo: ThreadInfo,
   +loggedInUserInfo: LoggedInUserInfo,
 };
 
 type BaseCreatePendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +messageTitle: string,
 };
 function baseCreatePendingSidebar(
   input: BaseCreatePendingSidebarInput,
 ): ThreadInfo {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     messageTitle,
   } = input;
   const { color, type: parentThreadType } = parentThreadInfo;
   const threadName = trimText(messageTitle, 30);
 
   const initialMembers = new Map();
 
   const { id: viewerID, username: viewerUsername } = loggedInUserInfo;
   initialMembers.set(viewerID, { id: viewerID, username: viewerUsername });
 
   if (userIsMember(parentThreadInfo, sourceMessageInfo.creator.id)) {
     const { id: sourceAuthorID, username: sourceAuthorUsername } =
       sourceMessageInfo.creator;
     invariant(
       sourceAuthorUsername,
       'sourceAuthorUsername should be set in createPendingSidebar',
     );
     const initialMemberUserInfo = {
       id: sourceAuthorID,
       username: sourceAuthorUsername,
     };
     initialMembers.set(sourceAuthorID, initialMemberUserInfo);
   }
 
   const singleOtherUser = getSingleOtherUser(parentThreadInfo, viewerID);
   if (parentThreadType === threadTypes.PERSONAL && singleOtherUser) {
     const singleOtherUsername = parentThreadInfo.members.find(
       member => member.id === singleOtherUser,
     )?.username;
     invariant(
       singleOtherUsername,
       'singleOtherUsername should be set in createPendingSidebar',
     );
     const singleOtherUserInfo = {
       id: singleOtherUser,
       username: singleOtherUsername,
     };
     initialMembers.set(singleOtherUser, singleOtherUserInfo);
   }
 
   if (sourceMessageInfo.type === messageTypes.TEXT) {
     const memberMap = new Map();
     for (const member of parentThreadInfo.members) {
       const { id, role, username } = member;
       if (!role || !username) {
         continue;
       }
       memberMap.set(username.toLowerCase(), { id, username });
     }
     const mentions = extractMentionsFromText(sourceMessageInfo.text);
     for (const mention of mentions) {
       const userInfo = memberMap.get(mention.toLowerCase());
       if (userInfo) {
         initialMembers.set(userInfo.id, userInfo);
       }
     }
   }
 
   return createPendingThread({
     viewerID,
     threadType: threadTypes.SIDEBAR,
     members: [...initialMembers.values()],
     parentThreadInfo,
     threadColor: color,
     name: threadName,
     sourceMessageID: sourceMessageInfo.id,
   });
 }
 
 // The message title here may have ETH addresses that aren't resolved to ENS
 // names. This function should only be used in cases where we're sure that we
 // don't care about the thread title. We should prefer createPendingSidebar
 // wherever possible
 type CreateUnresolvedPendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +markdownRules: ParserRules,
 };
 function createUnresolvedPendingSidebar(
   input: CreateUnresolvedPendingSidebarInput,
 ): ThreadInfo {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     markdownRules,
   } = input;
 
   const messageTitleEntityText = getMessageTitle(
     sourceMessageInfo,
     parentThreadInfo,
     markdownRules,
   );
   const messageTitle = entityTextToRawString(messageTitleEntityText, {
     ignoreViewer: true,
   });
 
   return baseCreatePendingSidebar({
     sourceMessageInfo,
     parentThreadInfo,
     messageTitle,
     loggedInUserInfo,
   });
 }
 
 type CreatePendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +markdownRules: ParserRules,
   +getENSNames: ?GetENSNames,
 };
 async function createPendingSidebar(
   input: CreatePendingSidebarInput,
 ): Promise<ThreadInfo> {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     markdownRules,
     getENSNames,
   } = input;
 
   const messageTitleEntityText = getMessageTitle(
     sourceMessageInfo,
     parentThreadInfo,
     markdownRules,
   );
   const messageTitle = await getEntityTextAsString(
     messageTitleEntityText,
     getENSNames,
     { ignoreViewer: true },
   );
   invariant(
     messageTitle !== null && messageTitle !== undefined,
     'getEntityTextAsString only returns falsey when passed falsey',
   );
 
   return baseCreatePendingSidebar({
     sourceMessageInfo,
     parentThreadInfo,
     messageTitle,
     loggedInUserInfo,
   });
 }
 
 function pendingThreadType(numberOfOtherMembers: number): 4 | 6 | 7 {
   if (numberOfOtherMembers === 0) {
     return threadTypes.PRIVATE;
   } else if (numberOfOtherMembers === 1) {
     return threadTypes.PERSONAL;
   } else {
     return threadTypes.LOCAL;
   }
 }
 
 function threadTypeCanBePending(threadType: ThreadType): boolean {
   return (
     threadType === threadTypes.PERSONAL ||
     threadType === threadTypes.LOCAL ||
     threadType === threadTypes.SIDEBAR ||
     threadType === threadTypes.PRIVATE
   );
 }
 
 type CreateRealThreadParameters = {
   +threadInfo: ThreadInfo,
   +dispatchActionPromise: DispatchActionPromise,
   +createNewThread: ClientNewThreadRequest => Promise<NewThreadResult>,
   +sourceMessageID: ?string,
   +viewerID: ?string,
   +handleError?: () => mixed,
   +calendarQuery: CalendarQuery,
 };
 async function createRealThreadFromPendingThread({
   threadInfo,
   dispatchActionPromise,
   createNewThread,
   sourceMessageID,
   viewerID,
   calendarQuery,
 }: CreateRealThreadParameters): Promise<string> {
   if (!threadIsPending(threadInfo.id)) {
     return threadInfo.id;
   }
 
   const otherMemberIDs = threadOtherMembers(threadInfo.members, viewerID).map(
     member => member.id,
   );
   let resultPromise;
   if (threadInfo.type !== threadTypes.SIDEBAR) {
     invariant(
       otherMemberIDs.length > 0,
       'otherMemberIDs should not be empty for threads',
     );
     resultPromise = createNewThread({
       type: pendingThreadType(otherMemberIDs.length),
       initialMemberIDs: otherMemberIDs,
       color: threadInfo.color,
       calendarQuery,
     });
   } else {
     invariant(
       sourceMessageID,
       'sourceMessageID should be set when creating a sidebar',
     );
     resultPromise = createNewThread({
       type: threadTypes.SIDEBAR,
       initialMemberIDs: otherMemberIDs,
       color: threadInfo.color,
       sourceMessageID,
       parentThreadID: threadInfo.parentThreadID,
       name: threadInfo.name,
       calendarQuery,
     });
   }
   dispatchActionPromise(newThreadActionTypes, resultPromise);
   const { newThreadID } = await resultPromise;
   return newThreadID;
 }
 
 type RawThreadInfoOptions = {
   +includeVisibilityRules?: ?boolean,
   +filterMemberList?: ?boolean,
   +hideThreadStructure?: ?boolean,
   +shimThreadTypes?: ?{
     +[inType: ThreadType]: ThreadType,
   },
   +filterDetailedThreadEditPermissions?: boolean,
 };
 function rawThreadInfoFromServerThreadInfo(
   serverThreadInfo: ServerThreadInfo,
   viewerID: string,
   options?: RawThreadInfoOptions,
 ): ?RawThreadInfo {
   const includeVisibilityRules = options?.includeVisibilityRules;
   const filterMemberList = options?.filterMemberList;
   const hideThreadStructure = options?.hideThreadStructure;
   const shimThreadTypes = options?.shimThreadTypes;
   const filterDetailedThreadEditPermissions =
     options?.filterDetailedThreadEditPermissions;
 
   const members = [];
   let currentUser;
   for (const serverMember of serverThreadInfo.members) {
     if (
       filterMemberList &&
       serverMember.id !== viewerID &&
       !serverMember.role &&
       !memberHasAdminPowers(serverMember)
     ) {
       continue;
     }
     if (
       serverThreadInfo.id === genesis.id &&
       serverMember.id !== viewerID &&
       serverMember.id !== ashoat.id
     ) {
       continue;
     }
     const memberPermissions = filterThreadEditDetailedPermissions(
       serverMember.permissions,
       filterDetailedThreadEditPermissions,
     );
     members.push({
       id: serverMember.id,
       role: serverMember.role,
       permissions: memberPermissions,
       isSender: serverMember.isSender,
     });
     if (serverMember.id === viewerID) {
       currentUser = {
         role: serverMember.role,
         permissions: memberPermissions,
         subscription: serverMember.subscription,
         unread: serverMember.unread,
       };
     }
   }
 
   let currentUserPermissions;
   if (currentUser) {
     currentUserPermissions = currentUser.permissions;
   } else {
     currentUserPermissions = filterThreadEditDetailedPermissions(
       getAllThreadPermissions(null, serverThreadInfo.id),
       filterDetailedThreadEditPermissions,
     );
     currentUser = {
       role: null,
       permissions: currentUserPermissions,
       subscription: {
         home: false,
         pushNotifs: false,
       },
       unread: null,
     };
   }
   if (!permissionLookup(currentUserPermissions, threadPermissions.KNOW_OF)) {
     return null;
   }
 
   let { type } = serverThreadInfo;
   if (
     shimThreadTypes &&
     shimThreadTypes[type] !== null &&
     shimThreadTypes[type] !== undefined
   ) {
     type = shimThreadTypes[type];
   }
 
   let rawThreadInfo: any = {
     id: serverThreadInfo.id,
     type,
     name: serverThreadInfo.name,
     description: serverThreadInfo.description,
     color: serverThreadInfo.color,
     creationTime: serverThreadInfo.creationTime,
     parentThreadID: serverThreadInfo.parentThreadID,
     members,
     roles: serverThreadInfo.roles,
     currentUser,
     repliesCount: serverThreadInfo.repliesCount,
   };
   if (!hideThreadStructure) {
     rawThreadInfo = {
       ...rawThreadInfo,
       containingThreadID: serverThreadInfo.containingThreadID,
       community: serverThreadInfo.community,
     };
   }
   const sourceMessageID = serverThreadInfo.sourceMessageID;
   if (sourceMessageID) {
     rawThreadInfo = { ...rawThreadInfo, sourceMessageID };
   }
   if (includeVisibilityRules) {
     return {
       ...rawThreadInfo,
       visibilityRules: rawThreadInfo.type,
     };
   }
   return rawThreadInfo;
 }
 
 function filterThreadEditDetailedPermissions(
   permissions: ThreadPermissionsInfo,
   shouldFilter: ?boolean,
 ): ThreadPermissionsInfo {
   if (!shouldFilter) {
     return permissions;
   }
   const { edit_thread_color, edit_thread_description, ...newPermissions } =
     permissions;
   return newPermissions;
 }
 
 function threadUIName(threadInfo: ThreadInfo): string | ThreadEntity {
   if (threadInfo.name) {
     return firstLine(threadInfo.name);
   }
   const threadMembers = threadInfo.members.filter(
     memberInfo => memberInfo.role,
   );
   const memberEntities = threadMembers.map(member =>
     ET.user({ userInfo: member }),
   );
   return {
     type: 'thread',
     id: threadInfo.id,
     name: threadInfo.name,
     display: 'uiName',
     uiName: memberEntities,
   };
 }
 
 function threadInfoFromRawThreadInfo(
   rawThreadInfo: RawThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ThreadInfo {
   let threadInfo: ThreadInfo = {
     id: rawThreadInfo.id,
     type: rawThreadInfo.type,
     name: rawThreadInfo.name,
     uiName: '',
     description: rawThreadInfo.description,
     color: rawThreadInfo.color,
     creationTime: rawThreadInfo.creationTime,
     parentThreadID: rawThreadInfo.parentThreadID,
     containingThreadID: rawThreadInfo.containingThreadID,
     community: rawThreadInfo.community,
     members: getRelativeMemberInfos(rawThreadInfo, viewerID, userInfos),
     roles: rawThreadInfo.roles,
     currentUser: getCurrentUser(rawThreadInfo, viewerID, userInfos),
     repliesCount: rawThreadInfo.repliesCount,
   };
   threadInfo = {
     ...threadInfo,
     uiName: threadUIName(threadInfo),
   };
   const { sourceMessageID } = rawThreadInfo;
   if (sourceMessageID) {
     threadInfo = { ...threadInfo, sourceMessageID };
   }
   return threadInfo;
 }
 
 function getCurrentUser(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ThreadCurrentUserInfo {
   if (!threadFrozenDueToBlock(threadInfo, viewerID, userInfos)) {
     return threadInfo.currentUser;
   }
 
   return {
     ...threadInfo.currentUser,
     permissions: {
       ...threadInfo.currentUser.permissions,
       ...disabledPermissions,
     },
   };
 }
 
 function threadIsWithBlockedUserOnly(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
   checkOnlyViewerBlock?: boolean,
 ): boolean {
   if (
     threadOrParentThreadIsGroupChat(threadInfo) ||
     threadOrParentThreadHasAdminRole(threadInfo)
   ) {
     return false;
   }
 
   const otherUserID = getSingleOtherUser(threadInfo, viewerID);
   if (!otherUserID) {
     return false;
   }
   const otherUserRelationshipStatus =
     userInfos[otherUserID]?.relationshipStatus;
 
   if (checkOnlyViewerBlock) {
     return (
       otherUserRelationshipStatus === userRelationshipStatus.BLOCKED_BY_VIEWER
     );
   }
 
   return (
     !!otherUserRelationshipStatus &&
     relationshipBlockedInEitherDirection(otherUserRelationshipStatus)
   );
 }
 
 function threadFrozenDueToBlock(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos);
 }
 
 function threadFrozenDueToViewerBlock(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos, true);
 }
 
 function rawThreadInfoFromThreadInfo(threadInfo: ThreadInfo): RawThreadInfo {
   let rawThreadInfo: RawThreadInfo = {
     id: threadInfo.id,
     type: threadInfo.type,
     name: threadInfo.name,
     description: threadInfo.description,
     color: threadInfo.color,
     creationTime: threadInfo.creationTime,
     parentThreadID: threadInfo.parentThreadID,
     containingThreadID: threadInfo.containingThreadID,
     community: threadInfo.community,
     members: threadInfo.members.map(relativeMemberInfo => ({
       id: relativeMemberInfo.id,
       role: relativeMemberInfo.role,
       permissions: relativeMemberInfo.permissions,
       isSender: relativeMemberInfo.isSender,
     })),
     roles: threadInfo.roles,
     currentUser: threadInfo.currentUser,
     repliesCount: threadInfo.repliesCount,
   };
   const { sourceMessageID } = threadInfo;
   if (sourceMessageID) {
     rawThreadInfo = { ...rawThreadInfo, sourceMessageID };
   }
   return rawThreadInfo;
 }
 
 const threadTypeDescriptions: { [ThreadType]: string } = {
   [threadTypes.COMMUNITY_OPEN_SUBTHREAD]:
     'Anybody in the parent channel can see an open subchannel.',
   [threadTypes.COMMUNITY_SECRET_SUBTHREAD]:
     'Only visible to its members and admins of ancestor channels.',
 };
 
 function usersInThreadInfo(threadInfo: RawThreadInfo | ThreadInfo): string[] {
   const userIDs = new Set();
   for (const member of threadInfo.members) {
     userIDs.add(member.id);
   }
   return [...userIDs];
 }
 
 function memberIsAdmin(
   memberInfo: RelativeMemberInfo | MemberInfo,
   threadInfo: ThreadInfo | RawThreadInfo,
 ): boolean {
   return !!(
     memberInfo.role && roleIsAdminRole(threadInfo.roles[memberInfo.role])
   );
 }
 
 // Since we don't have access to all of the ancestor ThreadInfos, we approximate
 // "parent admin" as anybody with CHANGE_ROLE permissions.
 function memberHasAdminPowers(
   memberInfo: RelativeMemberInfo | MemberInfo | ServerMemberInfo,
 ): boolean {
   return !!memberInfo.permissions[threadPermissions.CHANGE_ROLE]?.value;
 }
 
 function roleIsAdminRole(roleInfo: ?RoleInfo): boolean {
   return !!(roleInfo && !roleInfo.isDefault && roleInfo.name === 'Admins');
 }
 
 function threadHasAdminRole(
   threadInfo: ?(RawThreadInfo | ThreadInfo | ServerThreadInfo),
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   return !!_find({ name: 'Admins' })(threadInfo.roles);
 }
 
 function threadOrParentThreadHasAdminRole(
   threadInfo: RawThreadInfo | ThreadInfo,
 ) {
   return (
     threadMembersWithoutAddedAshoat(threadInfo).filter(member =>
       memberHasAdminPowers(member),
     ).length > 0
   );
 }
 
 function identifyInvalidatedThreads(
   updateInfos: $ReadOnlyArray<ClientUpdateInfo>,
 ): Set<string> {
   const invalidated = new Set();
   for (const updateInfo of updateInfos) {
     if (updateInfo.type === updateTypes.DELETE_THREAD) {
       invalidated.add(updateInfo.threadID);
     }
   }
   return invalidated;
 }
 
 const permissionsDisabledByBlockArray = [
   threadPermissions.VOICED,
   threadPermissions.EDIT_ENTRIES,
   threadPermissions.EDIT_THREAD_NAME,
   threadPermissions.EDIT_THREAD_COLOR,
   threadPermissions.EDIT_THREAD_DESCRIPTION,
   threadPermissions.CREATE_SUBCHANNELS,
   threadPermissions.CREATE_SIDEBARS,
   threadPermissions.JOIN_THREAD,
   threadPermissions.EDIT_PERMISSIONS,
   threadPermissions.ADD_MEMBERS,
   threadPermissions.REMOVE_MEMBERS,
 ];
 
 const permissionsDisabledByBlock: Set<ThreadPermission> = new Set(
   permissionsDisabledByBlockArray,
 );
 
 const disabledPermissions: ThreadPermissionsInfo =
   permissionsDisabledByBlockArray.reduce(
     (permissions: ThreadPermissionsInfo, permission: string) => ({
       ...permissions,
       [permission]: { value: false, source: null },
     }),
     {},
   );
 
 // Consider updating itemHeight in native/chat/chat-thread-list.react.js
 // if you change this
 const emptyItemText: string =
   `Background chats are just like normal chats, except they don't ` +
   `contribute to your unread count.\n\n` +
   `To move a chat over here, switch the “Background” option in its settings.`;
 
 function threadNoun(threadType: ThreadType): string {
   if (threadType === threadTypes.SIDEBAR) {
     return 'thread';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.GENESIS
   ) {
     return 'channel';
   } else {
     return 'chat';
   }
 }
 
 function threadLabel(threadType: ThreadType): string {
   if (
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD
   ) {
     return 'Open';
   } else if (threadType === threadTypes.PERSONAL) {
     return 'Personal';
   } else if (threadType === threadTypes.SIDEBAR) {
     return 'Thread';
   } else if (threadType === threadTypes.PRIVATE) {
     return 'Private';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.GENESIS
   ) {
     return 'Community';
   } else {
     return 'Secret';
   }
 }
 
 function useWatchThread(threadInfo: ?ThreadInfo) {
   const dispatchActionPromise = useDispatchActionPromise();
   const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);
 
   const threadID = threadInfo?.id;
   const threadNotInChatList = !threadInChatList(threadInfo);
   React.useEffect(() => {
     if (threadID && threadNotInChatList) {
       threadWatcher.watchID(threadID);
       dispatchActionPromise(
         fetchMostRecentMessagesActionTypes,
         callFetchMostRecentMessages(threadID),
       );
     }
     return () => {
       if (threadID && threadNotInChatList) {
         threadWatcher.removeID(threadID);
       }
     };
   }, [
     callFetchMostRecentMessages,
     dispatchActionPromise,
     threadNotInChatList,
     threadID,
   ]);
 }
 
 type ExistingThreadInfoFinderParams = {
   +searching: boolean,
   +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
 };
 type ExistingThreadInfoFinder = (
   params: ExistingThreadInfoFinderParams,
 ) => ?ThreadInfo;
 function useExistingThreadInfoFinder(
   baseThreadInfo: ?ThreadInfo,
 ): ExistingThreadInfoFinder {
   const threadInfos = useSelector(threadInfoSelector);
   const loggedInUserInfo = useLoggedInUserInfo();
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const pendingToRealizedThreadIDs = useSelector(state =>
     pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
   );
   return React.useCallback(
     (params: ExistingThreadInfoFinderParams): ?ThreadInfo => {
       if (!baseThreadInfo) {
         return null;
       }
 
       const realizedThreadInfo = threadInfos[baseThreadInfo.id];
       if (realizedThreadInfo) {
         return realizedThreadInfo;
       }
 
       if (!loggedInUserInfo || !threadIsPending(baseThreadInfo.id)) {
         return baseThreadInfo;
       }
       const viewerID = loggedInUserInfo?.id;
 
       invariant(
         threadTypeCanBePending(baseThreadInfo.type),
         `ThreadInfo has pending ID ${baseThreadInfo.id}, but type that ` +
           `should not be pending ${baseThreadInfo.type}`,
       );
 
       const { searching, userInfoInputArray } = params;
 
       const { sourceMessageID } = baseThreadInfo;
       const pendingThreadID = searching
         ? getPendingThreadID(
             pendingThreadType(userInfoInputArray.length),
             [...userInfoInputArray.map(user => user.id), viewerID],
             sourceMessageID,
           )
         : getPendingThreadID(
             baseThreadInfo.type,
             baseThreadInfo.members.map(member => member.id),
             sourceMessageID,
           );
 
       const realizedThreadID = pendingToRealizedThreadIDs.get(pendingThreadID);
       if (realizedThreadID && threadInfos[realizedThreadID]) {
         return threadInfos[realizedThreadID];
       }
 
       const updatedThread = searching
         ? createPendingThread({
             viewerID,
             threadType: pendingThreadType(userInfoInputArray.length),
             members: [loggedInUserInfo, ...userInfoInputArray],
           })
         : baseThreadInfo;
       return {
         ...updatedThread,
         currentUser: getCurrentUser(updatedThread, viewerID, userInfos),
       };
     },
     [
       baseThreadInfo,
       threadInfos,
       loggedInUserInfo,
       pendingToRealizedThreadIDs,
       userInfos,
     ],
   );
 }
 
 type ThreadTypeParentRequirement = 'optional' | 'required' | 'disabled';
 function getThreadTypeParentRequirement(
   threadType: ThreadType,
 ): ThreadTypeParentRequirement {
   if (
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD ||
     //threadType === threadTypes.COMMUNITY_SECRET_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.SIDEBAR
   ) {
     return 'required';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.GENESIS ||
     threadType === threadTypes.PERSONAL ||
     threadType === threadTypes.PRIVATE
   ) {
     return 'disabled';
   } else {
     return 'optional';
   }
 }
 
 function threadMemberHasPermission(
   threadInfo: ServerThreadInfo | RawThreadInfo | ThreadInfo,
   memberID: string,
   permission: ThreadPermission,
 ): boolean {
   for (const member of threadInfo.members) {
     if (member.id !== memberID) {
       continue;
     }
     return permissionLookup(member.permissions, permission);
   }
   return false;
 }
 
 function useCanCreateSidebarFromMessage(
   threadInfo: ThreadInfo,
   messageInfo: ComposableMessageInfo | RobotextMessageInfo,
 ): boolean {
   const messageCreatorUserInfo = useSelector(
     state => state.userStore.userInfos[messageInfo.creator.id],
   );
 
   if (!messageInfo.id || threadInfo.sourceMessageID === messageInfo.id) {
     return false;
   }
 
   const messageCreatorRelationship = messageCreatorUserInfo?.relationshipStatus;
   const creatorRelationshipHasBlock =
     messageCreatorRelationship &&
     relationshipBlockedInEitherDirection(messageCreatorRelationship);
 
   const hasPermission = threadHasPermission(
     threadInfo,
     threadPermissions.CREATE_SIDEBARS,
   );
 
   return hasPermission && !creatorRelationshipHasBlock;
 }
 
 function useSidebarExistsOrCanBeCreated(
   threadInfo: ThreadInfo,
   messageItem: ChatMessageInfoItem,
 ): boolean {
   const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage(
     threadInfo,
     messageItem.messageInfo,
   );
   return !!messageItem.threadCreatedFromMessage || canCreateSidebarFromMessage;
 }
 
 function checkIfDefaultMembersAreVoiced(threadInfo: ThreadInfo): boolean {
   const defaultRoleID = Object.keys(threadInfo.roles).find(
     roleID => threadInfo.roles[roleID].isDefault,
   );
   invariant(
     defaultRoleID !== undefined,
     'all threads should have a default role',
   );
   const defaultRole = threadInfo.roles[defaultRoleID];
   return !!defaultRole.permissions[threadPermissions.VOICED];
 }
 
 function draftKeyFromThreadID(threadID: string): string {
   return `${threadID}/message_composer`;
 }
 
 function getContainingThreadID(
   parentThreadInfo: ?ServerThreadInfo | RawThreadInfo | ThreadInfo,
   threadType: ThreadType,
 ): ?string {
   if (!parentThreadInfo) {
     return null;
   }
   if (threadType === threadTypes.SIDEBAR) {
     return parentThreadInfo.id;
   }
   if (!parentThreadInfo.containingThreadID) {
     return parentThreadInfo.id;
   }
   return parentThreadInfo.containingThreadID;
 }
 
 function getCommunity(
   parentThreadInfo: ?ServerThreadInfo | RawThreadInfo | ThreadInfo,
 ): ?string {
   if (!parentThreadInfo) {
     return null;
   }
   const { id, community, type } = parentThreadInfo;
   if (community !== null && community !== undefined) {
     return community;
   }
   if (threadTypeIsCommunityRoot(type)) {
     return id;
   }
   return null;
 }
 
 function getThreadListSearchResults(
   chatListData: $ReadOnlyArray<ChatThreadItem>,
   searchText: string,
   threadFilter: ThreadInfo => boolean,
   threadSearchResults: $ReadOnlySet<string>,
   usersSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
   loggedInUserInfo: ?LoggedInUserInfo,
 ): $ReadOnlyArray<ChatThreadItem> {
   if (!searchText) {
     return chatListData.filter(
       item =>
         threadIsTopLevel(item.threadInfo) && threadFilter(item.threadInfo),
     );
   }
 
   const privateThreads = [];
   const personalThreads = [];
   const otherThreads = [];
   for (const item of chatListData) {
     if (!threadSearchResults.has(item.threadInfo.id)) {
       continue;
     }
     if (item.threadInfo.type === threadTypes.PRIVATE) {
       privateThreads.push({ ...item, sidebars: [] });
     } else if (item.threadInfo.type === threadTypes.PERSONAL) {
       personalThreads.push({ ...item, sidebars: [] });
     } else {
       otherThreads.push({ ...item, sidebars: [] });
     }
   }
 
   const chatItems = [...privateThreads, ...personalThreads, ...otherThreads];
   if (loggedInUserInfo) {
     chatItems.push(
       ...usersSearchResults.map(user =>
         createPendingThreadItem(loggedInUserInfo, user),
       ),
     );
   }
   return chatItems;
 }
 
 type ThreadListSearchResult = {
   +threadSearchResults: $ReadOnlySet<string>,
   +usersSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
 };
 function useThreadListSearch(
   chatListData: $ReadOnlyArray<ChatThreadItem>,
   searchText: string,
   viewerID: ?string,
 ): ThreadListSearchResult {
   const callSearchUsers = useServerCall(searchUserCall);
   const usersWithPersonalThread = useSelector(usersWithPersonalThreadSelector);
   const searchUsers = React.useCallback(
     async (usernamePrefix: string) => {
       if (usernamePrefix.length === 0) {
         return [];
       }
 
       const { userInfos } = await callSearchUsers(usernamePrefix);
       return userInfos.filter(
         info => !usersWithPersonalThread.has(info.id) && info.id !== viewerID,
       );
     },
     [callSearchUsers, usersWithPersonalThread, viewerID],
   );
 
   const [threadSearchResults, setThreadSearchResults] = React.useState(
     new Set(),
   );
   const [usersSearchResults, setUsersSearchResults] = React.useState([]);
   const threadSearchIndex = useGlobalThreadSearchIndex();
   React.useEffect(() => {
     (async () => {
       const results = threadSearchIndex.getSearchResults(searchText);
       setThreadSearchResults(new Set(results));
       const usersResults = await searchUsers(searchText);
       setUsersSearchResults(usersResults);
     })();
   }, [searchText, chatListData, threadSearchIndex, searchUsers]);
 
   return { threadSearchResults, usersSearchResults };
 }
 
 function removeMemberFromThread(
   threadInfo: ThreadInfo,
   memberInfo: RelativeMemberInfo,
   dispatchActionPromise: DispatchActionPromise,
   removeUserFromThreadServerCall: (
     threadID: string,
     memberIDs: $ReadOnlyArray<string>,
   ) => Promise<ChangeThreadSettingsPayload>,
 ) {
   const customKeyName = `${removeUsersFromThreadActionTypes.started}:${memberInfo.id}`;
   dispatchActionPromise(
     removeUsersFromThreadActionTypes,
     removeUserFromThreadServerCall(threadInfo.id, [memberInfo.id]),
     { customKeyName },
   );
 }
 
 function switchMemberAdminRoleInThread(
   threadInfo: ThreadInfo,
   memberInfo: RelativeMemberInfo,
   isCurrentlyAdmin: boolean,
   dispatchActionPromise: DispatchActionPromise,
   changeUserRoleServerCall: (
     threadID: string,
     memberIDs: $ReadOnlyArray<string>,
     newRole: string,
   ) => Promise<ChangeThreadSettingsPayload>,
 ) {
   let newRole = null;
   for (const roleID in threadInfo.roles) {
     const role = threadInfo.roles[roleID];
     if (isCurrentlyAdmin && role.isDefault) {
       newRole = role.id;
       break;
     } else if (!isCurrentlyAdmin && roleIsAdminRole(role)) {
       newRole = role.id;
       break;
     }
   }
   invariant(newRole !== null, 'Could not find new role');
 
   const customKeyName = `${changeThreadMemberRolesActionTypes.started}:${memberInfo.id}`;
   dispatchActionPromise(
     changeThreadMemberRolesActionTypes,
     changeUserRoleServerCall(threadInfo.id, [memberInfo.id], newRole),
     { customKeyName },
   );
 }
 
 function getAvailableThreadMemberActions(
   memberInfo: RelativeMemberInfo,
   threadInfo: ThreadInfo,
   canEdit: ?boolean = true,
 ): $ReadOnlyArray<'remove_user' | 'remove_admin' | 'make_admin'> {
   const role = memberInfo.role;
   if (!canEdit || !role) {
     return [];
   }
 
   const canRemoveMembers = threadHasPermission(
     threadInfo,
     threadPermissions.REMOVE_MEMBERS,
   );
   const canChangeRoles = threadHasPermission(
     threadInfo,
     threadPermissions.CHANGE_ROLE,
   );
 
   const result = [];
   if (
     canRemoveMembers &&
     !memberInfo.isViewer &&
     (canChangeRoles || threadInfo.roles[role]?.isDefault)
   ) {
     result.push('remove_user');
   }
 
   if (canChangeRoles && memberInfo.username && threadHasAdminRole(threadInfo)) {
     result.push(
       memberIsAdmin(memberInfo, threadInfo) ? 'remove_admin' : 'make_admin',
     );
   }
 
   return result;
 }
 
 export {
   colorIsDark,
   generateRandomColor,
   generatePendingThreadColor,
   threadHasPermission,
   viewerIsMember,
   threadInChatList,
   threadIsTopLevel,
   threadIsChannel,
   threadIsSidebar,
   threadInBackgroundChatList,
   threadInHomeChatList,
   threadIsInHome,
   threadInFilterList,
   userIsMember,
   threadActualMembers,
   threadOtherMembers,
   threadIsGroupChat,
   threadIsPending,
+  threadIsPendingSidebar,
   getSingleOtherUser,
   getPendingThreadID,
   pendingThreadIDRegex,
   parsePendingThreadID,
   createPendingThread,
   createUnresolvedPendingSidebar,
   createPendingSidebar,
   pendingThreadType,
   createRealThreadFromPendingThread,
   getCurrentUser,
   threadFrozenDueToBlock,
   threadFrozenDueToViewerBlock,
   rawThreadInfoFromServerThreadInfo,
   filterThreadEditDetailedPermissions,
   threadUIName,
   threadInfoFromRawThreadInfo,
   rawThreadInfoFromThreadInfo,
   threadTypeDescriptions,
   usersInThreadInfo,
   memberIsAdmin,
   memberHasAdminPowers,
   roleIsAdminRole,
   threadHasAdminRole,
   identifyInvalidatedThreads,
   permissionsDisabledByBlock,
   emptyItemText,
   threadNoun,
   threadLabel,
   useWatchThread,
   useExistingThreadInfoFinder,
   getThreadTypeParentRequirement,
   threadMemberHasPermission,
   useCanCreateSidebarFromMessage,
   useSidebarExistsOrCanBeCreated,
   checkIfDefaultMembersAreVoiced,
   draftKeyFromThreadID,
   threadTypeCanBePending,
   getContainingThreadID,
   getCommunity,
   getThreadListSearchResults,
   useThreadListSearch,
   removeMemberFromThread,
   switchMemberAdminRoleInThread,
   getAvailableThreadMemberActions,
   selectedThreadColors,
   threadMembersWithoutAddedAshoat,
   validChatNameRegex,
   chatNameMaxLength,
 };
diff --git a/native/input/input-state-container.react.js b/native/input/input-state-container.react.js
index 7ec3b5d22..a967ef4a9 100644
--- a/native/input/input-state-container.react.js
+++ b/native/input/input-state-container.react.js
@@ -1,1428 +1,1462 @@
 // @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 {
   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,
   updateMultimediaMessageMediaActionType,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
 } from 'lib/actions/upload-actions.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,
 } from 'lib/shared/message-utils.js';
 import {
   createRealThreadFromPendingThread,
   threadIsPending,
+  threadIsPendingSidebar,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   UploadMultimediaResult,
   Media,
   NativeMediaSelection,
   MediaMissionResult,
   MediaMission,
 } from 'lib/types/media-types.js';
 import {
   messageTypes,
   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 {
   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 type {
   ClientNewThreadRequest,
   NewThreadResult,
   ThreadInfo,
 } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.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 {
   InputStateContext,
   type PendingMultimediaUploads,
   type MultimediaProcessingStep,
 } from './input-state.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>,
   +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>,
 };
 type State = {
   +pendingUploads: PendingMultimediaUploads,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
   };
   sendCallbacks: Array<() => void> = [];
   activeURIs = new Map();
   replyCallbacks: Array<(message: string) => void> = [];
   pendingThreadCreations = new Map<string, Promise<string>>();
 
+  // 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,
     (pendingUploads: PendingMultimediaUploads) => ({
       pendingUploads,
       sendTextMessage: this.sendTextMessage,
       sendMultimediaMessage: this.sendMultimediaMessage,
       addReply: this.addReply,
       addReplyListener: this.addReplyListener,
       removeReplyListener: this.removeReplyListener,
       messageHasUploadFailure: this.messageHasUploadFailure,
       retryMessage: this.retryMessage,
       registerSendCallback: this.registerSendCallback,
       unregisterSendCallback: this.unregisterSendCallback,
       uploadInProgress: this.uploadInProgress,
       reportURIDisplayed: this.reportURIDisplayed,
     }),
   );
 
   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,
     threadInfo: ThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
 
+    const { localID } = messageInfo;
+    invariant(
+      localID !== null && localID !== undefined,
+      'localID should be set',
+    );
+    if (threadIsPendingSidebar(threadInfo.id)) {
+      this.pendingSidebarCreationMessageLocalIDs.add(localID);
+    }
+
     if (!threadIsPending(threadInfo.id)) {
       this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       newThreadID = await this.startThreadCreation(threadInfo);
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendTextMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(threadInfo.id);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   };
 
   async startThreadCreation(threadInfo: ThreadInfo): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return threadInfo.id;
     }
     let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
     if (!threadCreationPromise) {
       const calendarQuery = this.props.calendarQuery();
       threadCreationPromise = createRealThreadFromPendingThread({
         threadInfo,
         dispatchActionPromise: this.props.dispatchActionPromise,
         createNewThread: this.props.newThread,
         sourceMessageID: threadInfo.sourceMessageID,
         viewerID: this.props.viewerID,
         calendarQuery,
       });
       this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
     }
     return threadCreationPromise;
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
   ): Promise<SendMessagePayload> {
     try {
       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;
     }
   }
 
   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,
         });
         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,
         });
         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,
         });
         this.props.dispatch({
           type: createLocalMessageActionType,
           payload: messageInfo,
         });
       },
     );
 
     await this.uploadFiles(localMessageID, uploadFileInputs);
   };
 
   async uploadFiles(
     localMessageID: string,
     uploadFileInputs: $ReadOnlyArray<UploadFileInput>,
   ) {
     const results = await Promise.all(
       uploadFileInputs.map(uploadFileInput =>
         this.uploadFile(localMessageID, uploadFileInput),
       ),
     );
     const errors = [...new Set(results.filter(Boolean))];
     if (errors.length > 0) {
       displayActionResultModal(errors.join(', ') + ' :(');
     }
   }
 
   async uploadFile(
     localMessageID: string,
     uploadFileInput: UploadFileInput,
   ): 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 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;
     };
 
     let processedMedia;
     const processingStart = Date.now();
     try {
       const processMediaReturn = processMedia(
         selection,
         this.mediaProcessConfig(localMessageID, localMediaID),
       );
       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);
       }
       processedMedia = processResult;
     } catch (e) {
       onUploadFailed(localMediaID, 'processing failed');
       return await onUploadFinished({
         success: false,
         reason: 'processing_exception',
         time: Date.now() - processingStart,
         exceptionMessage: getMessageForException(e),
       });
     }
 
     const { uploadURI, shouldDisposePath, filename, mime } = processedMedia;
 
     const { hasWiFi } = this.props;
 
     const uploadStart = Date.now();
     let uploadExceptionMessage,
       uploadResult,
       uploadThumbnailResult,
       mediaMissionResult;
     try {
       const uploadPromises = [];
       uploadPromises.push(
         this.props.uploadMultimedia(
           { uri: uploadURI, name: filename, type: mime },
           {
             ...processedMedia.dimensions,
             loop:
               processedMedia.mediaType === 'video'
                 ? processedMedia.loop
                 : undefined,
           },
           {
             onProgress: (percent: number) =>
               this.setProgress(
                 localMessageID,
                 localMediaID,
                 'uploading',
                 percent,
               ),
             uploadBlob: this.uploadBlob,
           },
         ),
       );
 
       if (processedMedia.mediaType === 'video') {
         uploadPromises.push(
           this.props.uploadMultimedia(
             {
               uri: processedMedia.uploadThumbnailURI,
               name: replaceExtension(`thumb${filename}`, 'jpg'),
               type: 'image/jpeg',
             },
             {
               ...processedMedia.dimensions,
               loop: false,
             },
             {
               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' && uploadResult) ||
       (processedMedia.mediaType === 'video' &&
         uploadResult &&
         uploadThumbnailResult)
     ) {
       const { id, uri, dimensions, loop } = uploadResult;
       serverID = id;
 
       let updateMediaPayload = {
         messageID: localMessageID,
         currentMediaID: localMediaID,
         mediaUpdate: {
           id,
           type: uploadResult.mediaType,
           uri,
           dimensions,
           localMediaSelection: undefined,
           loop: uploadResult.mediaType === 'video' ? loop : undefined,
         },
       };
 
       if (processedMedia.mediaType === 'video') {
         invariant(uploadThumbnailResult, 'uploadThumbnailResult exists');
         const { uri: thumbnailURI, id: thumbnailID } = uploadThumbnailResult;
         updateMediaPayload = {
           ...updateMediaPayload,
           mediaUpdate: {
             ...updateMediaPayload.mediaUpdate,
             thumbnailURI,
             thumbnailID,
           },
         };
       }
 
       // 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({
       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 (shouldDisposePath) {
       // 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
       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);
   }
 
   mediaProcessConfig(localMessageID: string, localID: string) {
     const { hasWiFi, staffCanSee } = this.props;
     const onTranscodingProgress = (percent: number) => {
       this.setProgress(localMessageID, localID, 'transcoding', percent);
     };
     if (staffCanSee) {
       return {
         hasWiFi,
         finalFileHeaderCheck: true,
         onTranscodingProgress,
       };
     }
     return { hasWiFi, onTranscodingProgress };
   }
 
   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,
         },
       };
     });
   }
 
   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);
   };
 
   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,
     );
   };
 
   retryTextMessage = async (
     rawMessageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
   ) => {
     await this.sendTextMessage(
       {
         ...rawMessageInfo,
         time: Date.now(),
       },
       threadInfo,
     );
   };
 
   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 => {
         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);
   };
 
   retryMessage = async (localMessageID: string, threadInfo: ThreadInfo) => {
     const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
     invariant(rawMessageInfo, `rawMessageInfo ${localMessageID} should exist`);
 
     if (rawMessageInfo.type === messageTypes.TEXT) {
       await this.retryTextMessage(rawMessageInfo, threadInfo);
     } 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);
     });
   }
 
   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 callSendMultimediaMessage = useServerCall(sendMultimediaMessage);
     const callSendTextMessage = useServerCall(sendTextMessage);
     const callNewThread = useServerCall(newThread);
     const dispatchActionPromise = useDispatchActionPromise();
     const dispatch = useDispatch();
     const mediaReportsEnabled = useIsReportEnabled('mediaReports');
     const staffCanSee = useStaffCanSee();
 
     return (
       <InputStateContainer
         {...props}
         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}
       />
     );
   });
 
 export default ConnectedInputStateContainer;
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index f53798aa8..4b04f4264 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1377 +1,1411 @@
 // @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 * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { createSelector } from 'reselect';
 
 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,
   updateMultimediaMessageMediaActionType,
   deleteUpload,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
 } from 'lib/actions/upload-actions.js';
 import {
   useModalContext,
   type PushModal,
 } from 'lib/components/modal-provider.react.js';
 import { getNextLocalUploadID } from 'lib/media/media-utils.js';
 import { pendingToRealizedThreadIDsSelector } from 'lib/selectors/thread-selectors.js';
 import {
   createMediaMessageInfo,
   localIDPrefix,
 } from 'lib/shared/message-utils.js';
 import {
   createRealThreadFromPendingThread,
   draftKeyFromThreadID,
   threadIsPending,
+  threadIsPendingSidebar,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   UploadMultimediaResult,
   MediaMissionStep,
   MediaMissionFailure,
   MediaMissionResult,
   MediaMission,
 } from 'lib/types/media-types.js';
 import {
   messageTypes,
   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 type {
   ClientNewThreadRequest,
   NewThreadResult,
   ThreadInfo,
 } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException, cloneError } from 'lib/utils/errors.js';
 
 import {
   type PendingMultimediaUpload,
   type InputState,
   type TypeaheadState,
   InputStateContext,
 } from './input-state.js';
 import { validateFile, preloadImage } from '../media/media-utils.js';
 import InvalidUploadModal from '../modals/chat/invalid-upload.react.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 },
   +pendingRealizedThreadIDs: $ReadOnlyMap<string, string>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +calendarQuery: () => CalendarQuery,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +deleteUpload: (id: string) => Promise<void>,
   +sendMultimediaMessage: (
     threadID: string,
     localID: string,
     mediaIDs: $ReadOnlyArray<string>,
+    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,
 };
 type State = {
   +pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
   +textCursorPositions: { [threadID: string]: number },
   +typeaheadState: TypeaheadState,
 };
 
 type PropsAndState = {
   ...Props,
   ...State,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
     textCursorPositions: {},
     typeaheadState: {
       canBeVisible: false,
       keepUpdatingThreadMembers: true,
       frozenThreadMembers: [],
       moveChoiceUp: null,
       moveChoiceDown: null,
       close: null,
       accept: null,
     },
   };
   replyCallbacks: Array<(message: string) => void> = [];
   pendingThreadCreations = new Map<string, Promise<string>>();
 
+  // 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 }) => {
           // We can get into this state where dimensions are null if the user is
           // uploading a file type that the browser can't render. In that case
           // we fake the dimensions here while we wait for the server to tell us
           // the true dimensions. We actually don't use the dimensions on the
           // web side currently, but if we ever change that (for instance if we
           // want to render a properly sized loading overlay like we do on
           // native), 0,0 is probably a good default.
           const shimmedDimensions = dimensions ?? { height: 0, width: 0 };
           invariant(
             mediaType === 'photo',
             "web InputStateContainer can't handle video",
           );
           return {
             id: serverID ? serverID : localID,
             uri,
             type: 'photo',
             dimensions: shimmedDimensions,
           };
         },
       );
       const messageInfo = createMediaMessageInfo({
         localID: messageID,
         threadID,
         creatorID,
         media,
       });
       newMessageInfos.set(messageID, messageInfo);
     }
 
     const currentlyCompleted = InputStateContainer.completedMessageIDs(
       this.state,
     );
     const previouslyCompleted =
       InputStateContainer.completedMessageIDs(prevState);
     for (const messageID of currentlyCompleted) {
       if (previouslyCompleted.has(messageID)) {
         continue;
       }
       let rawMessageInfo = newMessageInfos.get(messageID);
       if (rawMessageInfo) {
         newMessageInfos.delete(messageID);
       } else {
         rawMessageInfo = this.getRawMultimediaMessageInfo(messageID);
       }
       this.sendMultimediaMessage(rawMessageInfo);
     }
 
     for (const [, messageInfo] of newMessageInfos) {
       this.props.dispatch({
         type: createLocalMessageActionType,
         payload: messageInfo,
       });
     }
   }
 
   getRawMultimediaMessageInfo(
     localMessageID: string,
   ): RawMultimediaMessageInfo {
     const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
     invariant(rawMessageInfo, `rawMessageInfo ${localMessageID} should exist`);
     invariant(
       rawMessageInfo.type === messageTypes.IMAGES ||
         rawMessageInfo.type === messageTypes.MULTIMEDIA,
       `rawMessageInfo ${localMessageID} should be multimedia`,
     );
     return rawMessageInfo;
   }
 
   async sendMultimediaMessage(messageInfo: RawMultimediaMessageInfo) {
     if (!threadIsPending(messageInfo.threadID)) {
       this.props.dispatchActionPromise(
         sendMultimediaMessageActionTypes,
         this.sendMultimediaMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       const threadCreationPromise = this.pendingThreadCreations.get(
         messageInfo.threadID,
       );
       if (!threadCreationPromise) {
         // When we create or retry multimedia message, we add a promise to
         // pendingThreadCreations map. This promise can be removed in
         // sendMultimediaMessage and sendTextMessage methods. When any of these
         // method remove the promise, it has to be settled. If the promise was
         // fulfilled, this method would be called with realized thread, so we
         // can conclude that the promise was rejected. We don't have enough info
         // here to retry the thread creation, but we can mark the message as
         // failed. Then the retry will be possible and promise will be created
         // again.
         throw new Error('Thread creation failed');
       }
       newThreadID = await threadCreationPromise;
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendMultimediaMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(messageInfo.threadID);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
       this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<SendMessagePayload> {
     const { localID, threadID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
+    const 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;
     }
   }
 
   async startThreadCreation(threadInfo: ThreadInfo): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return threadInfo.id;
     }
     let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
     if (!threadCreationPromise) {
       const calendarQuery = this.props.calendarQuery();
       threadCreationPromise = createRealThreadFromPendingThread({
         threadInfo,
         dispatchActionPromise: this.props.dispatchActionPromise,
         createNewThread: this.props.newThread,
         sourceMessageID: threadInfo.sourceMessageID,
         viewerID: this.props.viewerID,
         calendarQuery,
       });
       this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
     }
     return threadCreationPromise;
   }
 
   inputBaseStateSelector = _memoize((threadID: string) =>
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.pendingUploads[threadID],
       (propsAndState: PropsAndState) =>
         propsAndState.drafts[draftKeyFromThreadID(threadID)],
       (propsAndState: PropsAndState) =>
         propsAndState.textCursorPositions[threadID],
       (
         pendingUploads: ?{ [localUploadID: string]: PendingMultimediaUpload },
         draft: ?string,
         textCursorPosition: ?number,
       ) => {
         let threadPendingUploads = [];
         const assignedUploads = {};
         if (pendingUploads) {
           const [uploadsWithMessageIDs, uploadsWithoutMessageIDs] =
             _partition('messageID')(pendingUploads);
           threadPendingUploads = _sortBy('localID')(uploadsWithoutMessageIDs);
           const threadAssignedUploads = _groupBy('messageID')(
             uploadsWithMessageIDs,
           );
           for (const messageID in threadAssignedUploads) {
             // lodash libdefs don't return $ReadOnlyArray
             assignedUploads[messageID] = [...threadAssignedUploads[messageID]];
           }
         }
         return {
           pendingUploads: threadPendingUploads,
           assignedUploads,
           draft: draft ?? '',
           textCursorPosition: textCursorPosition ?? 0,
           appendFiles: (files: $ReadOnlyArray<File>) =>
             this.appendFiles(threadID, files),
           cancelPendingUpload: (localUploadID: string) =>
             this.cancelPendingUpload(threadID, localUploadID),
           sendTextMessage: (
             messageInfo: RawTextMessageInfo,
             threadInfo: ThreadInfo,
           ) => this.sendTextMessage(messageInfo, threadInfo),
           createMultimediaMessage: (localID: number, threadInfo: ThreadInfo) =>
             this.createMultimediaMessage(localID, threadInfo),
           setDraft: (newDraft: string) => this.setDraft(threadID, newDraft),
           setTextCursorPosition: (newPosition: number) =>
             this.setTextCursorPosition(threadID, newPosition),
           messageHasUploadFailure: (localMessageID: string) =>
             this.messageHasUploadFailure(assignedUploads[localMessageID]),
           retryMultimediaMessage: (
             localMessageID: string,
             threadInfo: ThreadInfo,
           ) =>
             this.retryMultimediaMessage(
               localMessageID,
               threadInfo,
               assignedUploads[localMessageID],
             ),
           addReply: (message: string) => this.addReply(message),
           addReplyListener: this.addReplyListener,
           removeReplyListener: this.removeReplyListener,
           registerSendCallback: this.props.registerSendCallback,
           unregisterSendCallback: this.props.unregisterSendCallback,
         };
       },
     ),
   );
 
   typeaheadStateSelector = createSelector(
     (propsAndState: PropsAndState) => propsAndState.typeaheadState,
     (typeaheadState: TypeaheadState) => ({
       typeaheadState,
       setTypeaheadState: this.setTypeaheadState,
     }),
   );
 
   inputStateSelector = createSelector(
     state => state.inputBaseState,
     state => state.typeaheadState,
     (inputBaseState, typeaheadState) => ({
       ...inputBaseState,
       ...typeaheadState,
     }),
   );
 
   getRealizedOrPendingThreadID(threadID: string): string {
     return this.props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
   }
 
   async appendFiles(
     threadID: string,
     files: $ReadOnlyArray<File>,
   ): Promise<boolean> {
     const selectionTime = Date.now();
     const { pushModal } = this.props;
 
     const appendResults = await Promise.all(
       files.map(file => this.appendFile(file, selectionTime)),
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
       pushModal(<InvalidUploadModal />);
 
       const time = Date.now() - selectionTime;
       const reports = [];
       for (const appendResult of appendResults) {
         const { steps } = appendResult;
         let { result } = appendResult;
         let uploadLocalID;
         if (result.success) {
           uploadLocalID = result.pendingUpload.localID;
           result = { success: false, reason: 'web_sibling_validation_failed' };
         }
         const mediaMission = { steps, result, userTime: time, totalTime: time };
         reports.push({ mediaMission, uploadLocalID });
       }
       this.queueMediaMissionReports(reports);
 
       return false;
     }
 
     const newUploads = appendResults.map(({ result }) => {
       invariant(result.success, 'any failed validation should be caught above');
       return result.pendingUpload;
     });
 
     const newUploadsObject = _keyBy('localID')(newUploads);
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const mergedUploads = prevUploads
           ? { ...prevUploads, ...newUploadsObject }
           : newUploadsObject;
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: mergedUploads,
           },
         };
       },
       () => this.uploadFiles(threadID, newUploads),
     );
     return true;
   }
 
   async appendFile(
     file: File,
     selectTime: number,
   ): Promise<{
     steps: $ReadOnlyArray<MediaMissionStep>,
     result:
       | MediaMissionFailure
       | { success: true, pendingUpload: PendingMultimediaUpload },
   }> {
     const steps = [
       {
         step: 'web_selection',
         filename: file.name,
         size: file.size,
         mime: file.type,
         selectTime,
       },
     ];
 
     let response;
     const validationStart = Date.now();
     try {
       response = await validateFile(file, exifRotate);
     } catch (e) {
       return {
         steps,
         result: {
           success: false,
           reason: 'processing_exception',
           time: Date.now() - validationStart,
           exceptionMessage: getMessageForException(e),
         },
       };
     }
     const { steps: validationSteps, result } = response;
     steps.push(...validationSteps);
     if (!result.success) {
       return { steps, result };
     }
 
     const { uri, file: fixedFile, mediaType, dimensions } = result;
     return {
       steps,
       result: {
         success: true,
         pendingUpload: {
           localID: getNextLocalUploadID(),
           serverID: null,
           messageID: null,
           failed: false,
           file: fixedFile,
           mediaType,
           dimensions,
           uri,
           loop: false,
           uriIsReal: false,
           progressPercent: 0,
           abort: null,
           steps,
           selectTime,
         },
       },
     };
   }
 
   uploadFiles(
     threadID: string,
     uploads: $ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     return Promise.all(
       uploads.map(upload => this.uploadFile(threadID, upload)),
     );
   }
 
   async uploadFile(threadID: string, upload: PendingMultimediaUpload) {
     const { selectTime, localID } = upload;
     const steps = [...upload.steps];
     let userTime;
 
     const sendReport = (missionResult: MediaMissionResult) => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const latestUpload = this.state.pendingUploads[newThreadID][localID];
       invariant(
         latestUpload,
         `pendingUpload ${localID} for ${newThreadID} missing in sendReport`,
       );
       const { serverID, messageID } = latestUpload;
       const totalTime = Date.now() - selectTime;
       userTime = userTime ? userTime : totalTime;
       const mission = { steps, result: missionResult, totalTime, userTime };
       this.queueMediaMissionReports([
         {
           mediaMission: mission,
           uploadLocalID: localID,
           uploadServerID: serverID,
           messageLocalID: messageID,
         },
       ]);
     };
 
     let uploadResult, uploadExceptionMessage;
     const uploadStart = Date.now();
     try {
       uploadResult = await this.props.uploadMultimedia(
         upload.file,
         { ...upload.dimensions, loop: false },
         {
           onProgress: (percent: number) =>
             this.setProgress(threadID, localID, percent),
           abortHandler: (abort: () => void) =>
             this.handleAbortCallback(threadID, localID, abort),
         },
       );
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       this.handleUploadFailure(threadID, localID);
     }
     userTime = Date.now() - selectTime;
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: upload.file.name,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
     });
     if (!uploadResult) {
       sendReport({
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       });
       return;
     }
     const result = uploadResult;
 
     const successThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterSuccess =
       this.state.pendingUploads[successThreadID][localID];
     invariant(
       uploadAfterSuccess,
       `pendingUpload ${localID}/${result.id} for ${successThreadID} missing ` +
         `after upload`,
     );
     if (uploadAfterSuccess.messageID) {
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterSuccess.messageID,
           currentMediaID: localID,
           mediaUpdate: {
             id: result.id,
           },
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning serverID`,
       );
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               serverID: result.id,
               abort: null,
             },
           },
         },
       };
     });
 
     const { steps: preloadSteps } = await preloadImage(result.uri);
     steps.push(...preloadSteps);
     sendReport({ success: true });
 
     const preloadThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterPreload =
       this.state.pendingUploads[preloadThreadID][localID];
     invariant(
       uploadAfterPreload,
       `pendingUpload ${localID}/${result.id} for ${preloadThreadID} missing ` +
         `after preload`,
     );
     if (uploadAfterPreload.messageID) {
       const { mediaType, uri, dimensions, loop } = result;
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterPreload.messageID,
           currentMediaID: uploadAfterPreload.serverID
             ? uploadAfterPreload.serverID
             : uploadAfterPreload.localID,
           mediaUpdate: { type: mediaType, uri, dimensions, loop },
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning URI`,
       );
       const { messageID } = currentUpload;
       if (messageID && !messageID.startsWith(localIDPrefix)) {
         const newPendingUploads = _omit([localID])(uploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               uri: result.uri,
               mediaType: result.mediaType,
               dimensions: result.dimensions,
               uriIsReal: true,
               loop: result.loop,
             },
           },
         },
       };
     });
   }
 
   handleAbortCallback(
     threadID: string,
     localUploadID: string,
     abort: () => void,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been cancelled before we were even handed the
         // abort function. We should immediately abort.
         abort();
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               abort,
             },
           },
         },
       };
     });
   }
 
   handleUploadFailure(threadID: string, localUploadID: string) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload || !upload.abort || upload.serverID) {
         // The upload has been cancelled or completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
               abort: null,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReports(
     partials: $ReadOnlyArray<{
       mediaMission: MediaMission,
       uploadLocalID?: ?string,
       uploadServerID?: ?string,
       messageLocalID?: ?string,
     }>,
   ) {
     const reports = partials.map(
       ({ mediaMission, uploadLocalID, uploadServerID, messageLocalID }) => ({
         type: reportTypes.MEDIA_MISSION,
         time: Date.now(),
         platformDetails: getConfig().platformDetails,
         mediaMission,
         uploadServerID,
         uploadLocalID,
         messageLocalID,
       }),
     );
     this.props.dispatch({ type: queueReportsActionType, payload: { reports } });
   }
 
   cancelPendingUpload(threadID: string, localUploadID: string) {
     let revokeURL, abortRequest;
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const currentPendingUploads = prevState.pendingUploads[newThreadID];
         if (!currentPendingUploads) {
           return {};
         }
         const pendingUpload = currentPendingUploads[localUploadID];
         if (!pendingUpload) {
           return {};
         }
         if (!pendingUpload.uriIsReal) {
           revokeURL = pendingUpload.uri;
         }
         if (pendingUpload.abort) {
           abortRequest = pendingUpload.abort;
         }
         if (pendingUpload.serverID) {
           this.props.deleteUpload(pendingUpload.serverID);
         }
         const newPendingUploads = _omit([localUploadID])(currentPendingUploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       },
       () => {
         if (revokeURL) {
           URL.revokeObjectURL(revokeURL);
         }
         if (abortRequest) {
           abortRequest();
         }
       },
     );
   }
 
   async sendTextMessage(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
+    const { localID } = messageInfo;
+    invariant(
+      localID !== null && localID !== undefined,
+      'localID should be set',
+    );
+    if (threadIsPendingSidebar(threadInfo.id)) {
+      this.pendingSidebarCreationMessageLocalIDs.add(localID);
+    }
+
     if (!threadIsPending(threadInfo.id)) {
       this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       newThreadID = await this.startThreadCreation(threadInfo);
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendTextMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(threadInfo.id);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
   ): Promise<SendMessagePayload> {
     try {
       const { localID } = messageInfo;
       invariant(
         localID !== null && localID !== undefined,
         'localID should be set',
       );
+      const 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) {
     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) {
     const newThreadID = this.getRealizedOrPendingThreadID(threadID);
     this.props.dispatch({
       type: 'UPDATE_DRAFT',
       payload: {
         key: draftKeyFromThreadID(newThreadID),
         text: draft,
       },
     });
   }
 
   setTextCursorPosition(threadID: string, newPosition: number) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       return {
         textCursorPositions: {
           ...prevState.textCursorPositions,
           [newThreadID]: newPosition,
         },
       };
     });
   }
 
   setTypeaheadState = (newState: $Shape<TypeaheadState>) => {
     this.setState(prevState => ({
       typeaheadState: {
         ...prevState.typeaheadState,
         ...newState,
       },
     }));
   };
 
   setProgress(
     threadID: string,
     localUploadID: string,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const pendingUploads = prevState.pendingUploads[newThreadID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   messageHasUploadFailure(
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     if (!pendingUploads) {
       return false;
     }
     return pendingUploads.some(upload => upload.failed);
   }
 
   retryMultimediaMessage(
     localMessageID: string,
     threadInfo: ThreadInfo,
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     const rawMessageInfo = this.getRawMultimediaMessageInfo(localMessageID);
     let newRawMessageInfo;
     // This conditional is for Flow
     if (rawMessageInfo.type === messageTypes.MULTIMEDIA) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: Date.now(),
       }: RawMediaMessageInfo);
     } else {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: Date.now(),
       }: RawImagesMessageInfo);
     }
 
     this.startThreadCreation(threadInfo);
 
+    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
     let inputState: ?InputState = null;
     if (activeChatThreadID) {
       const inputBaseState = this.inputBaseStateSelector(activeChatThreadID)({
         ...this.state,
         ...this.props,
       });
 
       const typeaheadState = this.typeaheadStateSelector({
         ...this.state,
         ...this.props,
       });
 
       inputState = this.inputStateSelector({
         inputBaseState,
         typeaheadState,
       });
     }
 
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedInputStateContainer(props) {
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const drafts = useSelector(state => state.draftStore.drafts);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const pendingToRealizedThreadIDs = useSelector(state =>
       pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
     );
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callDeleteUpload = useServerCall(deleteUpload);
     const callSendMultimediaMessage = useServerCall(
       legacySendMultimediaMessage,
     );
     const callSendTextMessage = useServerCall(sendTextMessage);
     const callNewThread = useServerCall(newThread);
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const modalContext = useModalContext();
 
     const [sendCallbacks, setSendCallbacks] = React.useState<
       $ReadOnlyArray<() => mixed>,
     >([]);
     const registerSendCallback = React.useCallback((callback: () => mixed) => {
       setSendCallbacks(prevCallbacks => [...prevCallbacks, callback]);
     }, []);
     const unregisterSendCallback = React.useCallback(
       (callback: () => mixed) => {
         setSendCallbacks(prevCallbacks =>
           prevCallbacks.filter(candidate => candidate !== callback),
         );
       },
       [],
     );
 
     return (
       <InputStateContainer
         {...props}
         activeChatThreadID={activeChatThreadID}
         drafts={drafts}
         viewerID={viewerID}
         messageStoreMessages={messageStoreMessages}
         pendingRealizedThreadIDs={pendingToRealizedThreadIDs}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         deleteUpload={callDeleteUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         pushModal={modalContext.pushModal}
         sendCallbacks={sendCallbacks}
         registerSendCallback={registerSendCallback}
         unregisterSendCallback={unregisterSendCallback}
       />
     );
   });
 
 export default ConnectedInputStateContainer;