From dcf29078f44be51e4ca53cd2155f6edfc1c02f2c Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Mon, 30 Aug 2021 14:32:56 -0700
Subject: [PATCH] ConversationView: Improve types

---
 .eslintrc.js                                  |    1 +
 background.html                               |   30 -
 package.json                                  |    5 +-
 stylesheets/_conversation.scss                |   10 -
 test/index.html                               |   43 -
 ts/components/CompositionArea.tsx             |   20 +-
 .../conversation/MessageDetail.stories.tsx    |    3 -
 ts/components/conversation/MessageDetail.tsx  |   49 +-
 ts/groups/joinViaLink.ts                      |    4 +-
 ts/model-types.d.ts                           |   14 +-
 ts/models/conversations.ts                    |   41 +-
 ts/sql/Server.ts                              |    4 +
 ts/state/smart/CompositionArea.tsx            |   10 +-
 ts/state/smart/MessageDetail.tsx              |   52 +-
 ts/types/Attachment.ts                        |   51 +-
 ts/types/LinkPreview.ts                       |    8 +-
 ts/util/handleImageAttachment.ts              |    6 +-
 ts/util/longRunningTaskWrapper.ts             |    8 +-
 ts/views/conversation_view.ts                 | 1510 ++++++++++-------
 ts/window.d.ts                                |  151 +-
 yarn.lock                                     |   22 +-
 21 files changed, 1101 insertions(+), 941 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 0acac950b2ce..7b746c6ff5f4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -44,6 +44,7 @@ const rules = {
   ],
 
   'no-continue': 'off',
+  'lines-between-class-members': 'off',
 
   // Prettier overrides:
   'arrow-parens': 'off',
diff --git a/background.html b/background.html
index 51a7ab2bf2af..cab672b47986 100644
--- a/background.html
+++ b/background.html
@@ -57,19 +57,6 @@
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="conversation-loading-screen">
-      <div class='module-title-bar-drag-area'></div>
-
-      <div class='content'>
-        <div class="module-splash-screen__logo module-img--128"></div>
-        <div class='container'>
-          <span class='dot'></span>
-          <span class='dot'></span>
-          <span class='dot'></span>
-        </div>
-      </div>
-    </script>
-
     <script type="text/x-tmpl-mustache" id="two-column">
       <div class='module-title-bar-drag-area'></div>
 
@@ -94,14 +81,6 @@
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="banner">
-      <div class='body'>
-        <span class='icon warning'></span>
-        {{ message }}
-        <span class='icon dismiss'></span>
-      </div>
-    </script>
-
     <script type="text/x-tmpl-mustache" id="toast">
       {{ toastMessage }}
     </script>
@@ -121,11 +100,6 @@
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="message-list">
-      <div class='messages'></div>
-      <div class='typing-container'></div>
-    </script>
-
     <script type="text/x-tmpl-mustache" id="recorder">
       <button class='close' tabIndex='2'><span class='icon'></span></button>
       <span class='time'>0:00</span>
@@ -145,10 +119,6 @@
       ({{ limit }}{{ units }})
     </script>
 
-    <script type="text/x-tmpl-mustache" id="attachment-type-modal">
-      Sorry, your attachment has a type, {{type}}, that is not currently supported.
-    </script>
-
     <script type="text/x-tmpl-mustache" id="group-member-list">
       <div class='container' tabindex='0'>
         {{ #summary }} <div class='summary'>{{ summary }}</div>{{ /summary }}
diff --git a/package.json b/package.json
index f30dae8f498b..95580b3f3222 100644
--- a/package.json
+++ b/package.json
@@ -181,7 +181,7 @@
     "@storybook/addon-knobs": "5.1.11",
     "@storybook/addons": "5.1.11",
     "@storybook/react": "5.1.11",
-    "@types/backbone": "1.4.3",
+    "@types/backbone": "1.4.5",
     "@types/better-sqlite3": "7.4.0",
     "@types/blueimp-load-image": "5.14.1",
     "@types/chai": "4.2.18",
@@ -195,7 +195,7 @@
     "@types/got": "9.4.1",
     "@types/history": "4.7.2",
     "@types/humanize-duration": "^3.18.1",
-    "@types/jquery": "3.5.0",
+    "@types/jquery": "3.5.6",
     "@types/js-yaml": "3.12.0",
     "@types/linkify-it": "2.1.0",
     "@types/lodash": "4.14.106",
@@ -204,6 +204,7 @@
     "@types/memoizee": "0.4.2",
     "@types/mkdirp": "0.5.2",
     "@types/mocha": "5.0.0",
+    "@types/mustache": "4.1.2",
     "@types/node": "14.14.37",
     "@types/node-fetch": "2.5.7",
     "@types/node-forge": "0.9.5",
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index d0fc74613eaa..75ac05d79ee3 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -110,16 +110,6 @@
   overflow-y: auto;
 }
 
-.discussion-container {
-  @include light-theme {
-    background-color: $color-white;
-  }
-
-  @include dark-theme {
-    background-color: $color-gray-95;
-  }
-}
-
 .typing-bubble-wrapper {
   margin-bottom: 20px;
 }
diff --git a/test/index.html b/test/index.html
index 8b706043c9d8..ec39862435ee 100644
--- a/test/index.html
+++ b/test/index.html
@@ -26,19 +26,6 @@
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="conversation-loading-screen">
-      <div class='module-title-bar-drag-area'></div>
-
-      <div class='content'>
-        <div class="module-splash-screen__logo module-img--128"></div>
-        <div class='container'>
-          <span class='dot'></span>
-          <span class='dot'></span>
-          <span class='dot'></span>
-        </div>
-      </div>
-    </script>
-
     <script type="text/x-tmpl-mustache" id="two-column">
       <div class='module-title-bar-drag-area'></div>
 
@@ -63,27 +50,6 @@
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="scroll-down-button-view">
-      <button class='text module-scroll-down__button {{ buttonClass }}' alt='{{ moreBelow }}'>
-        <div class='module-scroll-down__icon'></div>
-      </button>
-    </script>
-
-    <script type="text/x-tmpl-mustache" id="last-seen-indicator-view">
-      <div class='module-last-seen-indicator__bar'/>
-      <div class='module-last-seen-indicator__text'>
-        {{ unreadMessages }}
-      </div>
-    </script>
-
-    <script type="text/x-tmpl-mustache" id="banner">
-      <div class='body'>
-        <span class='icon warning'></span>
-        {{ message }}
-        <span class='icon dismiss'></span>
-      </div>
-    </script>
-
     <script type="text/x-tmpl-mustache" id="toast">
       {{ toastMessage }}
     </script>
@@ -103,11 +69,6 @@
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="message-list">
-      <div class='messages'></div>
-      <div class='typing-container'></div>
-    </script>
-
     <script type="text/x-tmpl-mustache" id="recorder">
       <button class='finish'><span class='icon'></span></button>
       <span class='time'>0:00</span>
@@ -127,10 +88,6 @@
       ({{ limit }}{{ units }})
     </script>
 
-    <script type="text/x-tmpl-mustache" id="attachment-type-modal">
-      Sorry, your attachment has a type, {{type}}, that is not currently supported.
-    </script>
-
     <script type="text/x-tmpl-mustache" id="group-member-list">
       <div class='container'>
         {{ #summary }} <div class='summary'>{{ summary }}</div>{{ /summary }}
diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx
index 50ae78583774..66b3781cd9c1 100644
--- a/ts/components/CompositionArea.tsx
+++ b/ts/components/CompositionArea.tsx
@@ -40,6 +40,16 @@ import { LinkPreviewWithDomain } from '../types/LinkPreview';
 import { ConversationType } from '../state/ducks/conversations';
 import { AnnouncementsOnlyGroupBanner } from './AnnouncementsOnlyGroupBanner';
 
+export type CompositionAPIType = {
+  focusInput: () => void;
+  isDirty: () => boolean;
+  setDisabled: (disabled: boolean) => void;
+  setShowMic: (showMic: boolean) => void;
+  setMicActive: (micActive: boolean) => void;
+  reset: InputApi['reset'];
+  resetEmojiResults: InputApi['resetEmojiResults'];
+};
+
 export type OwnProps = {
   readonly i18n: LocalizerType;
   readonly areWePending?: boolean;
@@ -55,15 +65,7 @@ export type OwnProps = {
   readonly left?: boolean;
   readonly messageRequestsEnabled?: boolean;
   readonly acceptedMessageRequest?: boolean;
-  readonly compositionApi?: React.MutableRefObject<{
-    focusInput: () => void;
-    isDirty: () => boolean;
-    setDisabled: (disabled: boolean) => void;
-    setShowMic: (showMic: boolean) => void;
-    setMicActive: (micActive: boolean) => void;
-    reset: InputApi['reset'];
-    resetEmojiResults: InputApi['resetEmojiResults'];
-  }>;
+  readonly compositionApi?: React.MutableRefObject<CompositionAPIType>;
   readonly micCellEl?: HTMLElement;
   readonly draftAttachments: Array<AttachmentType>;
   readonly shouldSendHighQualityAttachments: boolean;
diff --git a/ts/components/conversation/MessageDetail.stories.tsx b/ts/components/conversation/MessageDetail.stories.tsx
index ccbb3a89d83d..d7537cec109d 100644
--- a/ts/components/conversation/MessageDetail.stories.tsx
+++ b/ts/components/conversation/MessageDetail.stories.tsx
@@ -66,10 +66,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
 
   checkForAccount: action('checkForAccount'),
   clearSelectedMessage: action('clearSelectedMessage'),
-  deleteMessage: action('deleteMessage'),
-  deleteMessageForEveryone: action('deleteMessageForEveryone'),
   displayTapToViewMessage: action('displayTapToViewMessage'),
-  downloadAttachment: action('downloadAttachment'),
   doubleCheckMissingQuoteReference: action('doubleCheckMissingQuoteReference'),
   kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
   markAttachmentAsCorrupted: action('markAttachmentAsCorrupted'),
diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx
index 8197d6abfaa4..5cbcd7e4295d 100644
--- a/ts/components/conversation/MessageDetail.tsx
+++ b/ts/components/conversation/MessageDetail.tsx
@@ -15,7 +15,6 @@ import {
 } from './Message';
 import { LocalizerType } from '../../types/Util';
 import { ConversationType } from '../../state/ducks/conversations';
-import { assert } from '../../util/assert';
 import { groupBy } from '../../util/mapUtil';
 import { ContactNameColorType } from '../../types/Colors';
 import { SendStatus } from '../../messages/MessageSendState';
@@ -42,7 +41,7 @@ export type Contact = Pick<
   errors?: Array<Error>;
 };
 
-export type Props = {
+export type PropsData = {
   // An undefined status means they were the sender and it's an incoming message. If
   //   `undefined` is a status, there should be no other items in the array; if there are
   //   any defined statuses, `undefined` shouldn't be present.
@@ -57,16 +56,11 @@ export type Props = {
   sendAnyway: (contactId: string, messageId: string) => unknown;
   showSafetyNumber: (contactId: string) => void;
   i18n: LocalizerType;
-} & Pick<
+} & Pick<MessagePropsType, 'interactionMode'>;
+
+export type PropsBackboneActions = Pick<
   MessagePropsType,
-  | 'checkForAccount'
-  | 'clearSelectedMessage'
-  | 'deleteMessage'
-  | 'deleteMessageForEveryone'
   | 'displayTapToViewMessage'
-  | 'downloadAttachment'
-  | 'doubleCheckMissingQuoteReference'
-  | 'interactionMode'
   | 'kickOffAttachmentDownload'
   | 'markAttachmentAsCorrupted'
   | 'markViewed'
@@ -85,6 +79,16 @@ export type Props = {
   | 'showVisualAttachment'
 >;
 
+export type PropsReduxActions = Pick<
+  MessagePropsType,
+  | 'clearSelectedMessage'
+  | 'doubleCheckMissingQuoteReference'
+  | 'checkForAccount'
+>;
+
+export type ExternalProps = PropsData & PropsBackboneActions;
+export type Props = PropsData & PropsBackboneActions & PropsReduxActions;
+
 const contactSortCollator = new Intl.Collator();
 
 const _keyForError = (error: Error): string => {
@@ -263,10 +267,7 @@ export class MessageDetail extends React.Component<Props> {
       checkForAccount,
       clearSelectedMessage,
       contactNameColor,
-      deleteMessage,
-      deleteMessageForEveryone,
       displayTapToViewMessage,
-      downloadAttachment,
       doubleCheckMissingQuoteReference,
       i18n,
       interactionMode,
@@ -302,12 +303,18 @@ export class MessageDetail extends React.Component<Props> {
             clearSelectedMessage={clearSelectedMessage}
             contactNameColor={contactNameColor}
             containerElementRef={this.messageContainerRef}
-            deleteMessage={deleteMessage}
-            deleteMessageForEveryone={deleteMessageForEveryone}
+            deleteMessage={() =>
+              window.log.warn('MessageDetail: deleteMessage called!')
+            }
+            deleteMessageForEveryone={() =>
+              window.log.warn('MessageDetail: deleteMessageForEveryone called!')
+            }
             disableMenu
             disableScroll
             displayTapToViewMessage={displayTapToViewMessage}
-            downloadAttachment={downloadAttachment}
+            downloadAttachment={() =>
+              window.log.warn('MessageDetail: deleteMessageForEveryone called!')
+            }
             doubleCheckMissingQuoteReference={doubleCheckMissingQuoteReference}
             i18n={i18n}
             interactionMode={interactionMode}
@@ -324,10 +331,7 @@ export class MessageDetail extends React.Component<Props> {
             retrySend={retrySend}
             showForwardMessageModal={showForwardMessageModal}
             scrollToQuotedMessage={() => {
-              assert(
-                false,
-                'scrollToQuotedMessage should never be called because scrolling is disabled'
-              );
+              window.log.warn('MessageDetail: scrollToQuotedMessage called!');
             }}
             showContactDetail={showContactDetail}
             showContactModal={showContactModal}
@@ -338,9 +342,8 @@ export class MessageDetail extends React.Component<Props> {
               showExpiredOutgoingTapToViewToast
             }
             showMessageDetail={() => {
-              assert(
-                false,
-                "showMessageDetail should never be called because the menu is disabled (and we're already in the message detail!)"
+              window.log.warn(
+                'MessageDetail: deleteMessageForEveryone called!'
               );
             }}
             showVisualAttachment={showVisualAttachment}
diff --git a/ts/groups/joinViaLink.ts b/ts/groups/joinViaLink.ts
index 42193779e1b3..ddf38b19407b 100644
--- a/ts/groups/joinViaLink.ts
+++ b/ts/groups/joinViaLink.ts
@@ -341,7 +341,9 @@ export async function joinViaLink(hash: string): Promise<void> {
 
   window.log.info(`joinViaLink/${logId}: Showing modal`);
 
-  let groupV2InfoDialog = new window.Whisper.ReactWrapperView({
+  let groupV2InfoDialog:
+    | Backbone.View
+    | undefined = new window.Whisper.ReactWrapperView({
     className: 'group-v2-join-dialog-wrapper',
     JSX: window.Signal.State.Roots.createGroupV2JoinModal(window.reduxStore, {
       join,
diff --git a/ts/model-types.d.ts b/ts/model-types.d.ts
index 7f222c29cd63..bcf024acf1ff 100644
--- a/ts/model-types.d.ts
+++ b/ts/model-types.d.ts
@@ -22,7 +22,11 @@ import {
 } from './messages/MessageSendState';
 import { GroupNameCollisionsWithIdsByTitle } from './util/groupMemberNameCollisions';
 import { ConversationColorType } from './types/Colors';
-import { AttachmentType, ThumbnailType } from './types/Attachment';
+import {
+  AttachmentType,
+  ThumbnailType,
+  OnDiskAttachmentDraftType,
+} from './types/Attachment';
 import { EmbeddedContactType } from './types/EmbeddedContact';
 import { SignalService as Proto } from './protobuf';
 import { AvatarDataType } from './types/Avatar';
@@ -209,12 +213,8 @@ export type ConversationAttributesType = {
   customColor?: CustomColorType;
   customColorId?: string;
   discoveredUnregisteredAt?: number;
-  draftAttachments?: Array<{
-    fileName?: string;
-    path?: string;
-    pending?: boolean;
-    screenshotPath?: string;
-  }>;
+  draftChanged?: boolean;
+  draftAttachments?: Array<OnDiskAttachmentDraftType>;
   draftBodyRanges?: Array<BodyRangeType>;
   draftTimestamp?: number | null;
   inbox_position: number;
diff --git a/ts/models/conversations.ts b/ts/models/conversations.ts
index 3db059f24a65..09dc14722ff5 100644
--- a/ts/models/conversations.ts
+++ b/ts/models/conversations.ts
@@ -6,6 +6,7 @@
 import { compact } from 'lodash';
 import {
   ConversationAttributesType,
+  ConversationModelCollectionType,
   MessageAttributesType,
   MessageModelCollectionType,
   QuotedMessageType,
@@ -163,12 +164,14 @@ export class ConversationModel extends window.Backbone
 
   storeName?: string | null;
 
-  throttledBumpTyping: unknown;
+  throttledBumpTyping?: () => void;
 
   throttledFetchSMSOnlyUUID?: () => Promise<void> | void;
 
   throttledMaybeMigrateV1Group?: () => Promise<void> | void;
 
+  throttledGetProfiles?: () => Promise<void>;
+
   typingRefreshTimer?: NodeJS.Timer | null;
 
   typingPauseTimer?: NodeJS.Timer | null;
@@ -2329,13 +2332,13 @@ export class ConversationModel extends window.Backbone
     });
   }
 
-  getUnverified(): Backbone.Collection<ConversationModel> {
+  getUnverified(): ConversationModelCollectionType {
     if (isDirectConversation(this.attributes)) {
       return this.isUnverified()
-        ? new window.Backbone.Collection([this])
-        : new window.Backbone.Collection();
+        ? new window.Whisper.ConversationCollection([this])
+        : new window.Whisper.ConversationCollection();
     }
-    return new window.Backbone.Collection(
+    return new window.Whisper.ConversationCollection(
       this.contactCollection?.filter(contact => {
         if (isMe(contact.attributes)) {
           return false;
@@ -2382,15 +2385,15 @@ export class ConversationModel extends window.Backbone
     });
   }
 
-  getUntrusted(): Backbone.Collection<ConversationModel> {
+  getUntrusted(): ConversationModelCollectionType {
     if (isDirectConversation(this.attributes)) {
       if (this.isUntrusted()) {
-        return new window.Backbone.Collection([this]);
+        return new window.Whisper.ConversationCollection([this]);
       }
-      return new window.Backbone.Collection();
+      return new window.Whisper.ConversationCollection();
     }
 
-    return new window.Backbone.Collection(
+    return new window.Whisper.ConversationCollection(
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       this.contactCollection!.filter(contact => {
         if (isMe(contact.attributes)) {
@@ -2470,7 +2473,7 @@ export class ConversationModel extends window.Backbone
       readStatus: ReadStatus.Unread,
       // TODO: DESKTOP-722
       // this type does not fully implement the interface it is expected to
-    } as unknown) as typeof window.Whisper.MessageAttributesType;
+    } as unknown) as MessageAttributesType;
 
     const id = await window.Signal.Data.saveMessage(message);
     const model = window.MessageController.register(
@@ -2510,7 +2513,7 @@ export class ConversationModel extends window.Backbone
       readStatus: ReadStatus.Unread,
       // TODO: DESKTOP-722
       // this type does not fully implement the interface it is expected to
-    } as unknown) as typeof window.Whisper.MessageAttributesType;
+    } as unknown) as MessageAttributesType;
 
     const id = await window.Signal.Data.saveMessage(message);
     const model = window.MessageController.register(
@@ -2546,7 +2549,7 @@ export class ConversationModel extends window.Backbone
       schemaVersion: Message.VERSION_NEEDED_FOR_DISPLAY,
       // TODO: DESKTOP-722
       // this type does not fully implement the interface it is expected to
-    } as unknown) as typeof window.Whisper.MessageAttributesType;
+    } as unknown) as MessageAttributesType;
 
     const id = await window.Signal.Data.saveMessage(message);
     const model = window.MessageController.register(
@@ -2604,7 +2607,7 @@ export class ConversationModel extends window.Backbone
       local: options.local,
       readStatus: ReadStatus.Unread,
       // TODO: DESKTOP-722
-    } as unknown) as typeof window.Whisper.MessageAttributesType;
+    } as unknown) as MessageAttributesType;
 
     const id = await window.Signal.Data.saveMessage(message);
     const model = window.MessageController.register(
@@ -2663,7 +2666,7 @@ export class ConversationModel extends window.Backbone
       readStatus: unread ? ReadStatus.Unread : ReadStatus.Read,
       callHistoryDetails: detailsToSave,
       // TODO: DESKTOP-722
-    } as unknown) as typeof window.Whisper.MessageAttributesType;
+    } as unknown) as MessageAttributesType;
 
     const id = await window.Signal.Data.saveMessage(message);
     const model = window.MessageController.register(
@@ -2714,7 +2717,7 @@ export class ConversationModel extends window.Backbone
       changedId: conversationId || this.id,
       profileChange,
       // TODO: DESKTOP-722
-    } as unknown) as typeof window.Whisper.MessageAttributesType;
+    } as unknown) as MessageAttributesType;
 
     const id = await window.Signal.Data.saveMessage(message);
     const model = window.MessageController.register(
@@ -3185,9 +3188,7 @@ export class ConversationModel extends window.Backbone
     return [];
   }
 
-  async makeQuote(
-    quotedMessage: typeof window.Whisper.MessageType
-  ): Promise<QuotedMessageType> {
+  async makeQuote(quotedMessage: MessageModel): Promise<QuotedMessageType> {
     const { getName } = EmbeddedContact;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const contact = quotedMessage.getContact()!;
@@ -4452,10 +4453,10 @@ export class ConversationModel extends window.Backbone
     }
   }
 
-  getProfiles(): Promise<Array<void>> {
+  async getProfiles(): Promise<void> {
     // request all conversation members' keys
     const conversations = (this.getMembers() as unknown) as Array<ConversationModel>;
-    return Promise.all(
+    await Promise.all(
       window._.map(conversations, conversation =>
         getProfile(conversation.get('uuid'), conversation.get('e164'))
       )
diff --git a/ts/sql/Server.ts b/ts/sql/Server.ts
index 0fa30a1b6e09..f4b5a8333108 100644
--- a/ts/sql/Server.ts
+++ b/ts/sql/Server.ts
@@ -5624,6 +5624,10 @@ function getExternalDraftFilesForConversation(
   const files: Array<string> = [];
 
   forEach(draftAttachments, attachment => {
+    if (attachment.pending) {
+      return;
+    }
+
     const { path: file, screenshotPath } = attachment;
     if (file) {
       files.push(file);
diff --git a/ts/state/smart/CompositionArea.tsx b/ts/state/smart/CompositionArea.tsx
index be0b1e9a9671..3cbe563fcf3a 100644
--- a/ts/state/smart/CompositionArea.tsx
+++ b/ts/state/smart/CompositionArea.tsx
@@ -27,7 +27,7 @@ import {
 
 type ExternalProps = {
   id: string;
-  onClickQuotedMessage: (id?: string) => unknown;
+  onClickQuotedMessage: (id: string) => unknown;
 };
 
 const mapStateToProps = (state: StateType, props: ExternalProps) => {
@@ -92,8 +92,12 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
           ourConversationId: getUserConversationId(state),
         })
       : undefined,
-    onClickQuotedMessage: () =>
-      onClickQuotedMessage(quotedMessage?.quote?.messageId),
+    onClickQuotedMessage: () => {
+      const messageId = quotedMessage?.quote?.messageId;
+      if (messageId) {
+        onClickQuotedMessage(messageId);
+      }
+    },
     // Emojis
     recentEmojis,
     skinTone: get(state, ['items', 'skinTone'], 0),
diff --git a/ts/state/smart/MessageDetail.tsx b/ts/state/smart/MessageDetail.tsx
index 6d312dee00ea..bd8e072e8e57 100644
--- a/ts/state/smart/MessageDetail.tsx
+++ b/ts/state/smart/MessageDetail.tsx
@@ -1,10 +1,12 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { ComponentProps } from 'react';
 import { connect } from 'react-redux';
 
-import { MessageDetail } from '../../components/conversation/MessageDetail';
+import {
+  MessageDetail,
+  ExternalProps as MessageDetailProps,
+} from '../../components/conversation/MessageDetail';
 
 import { mapDispatchToProps } from '../actions';
 import { StateType } from '../reducer';
@@ -13,40 +15,10 @@ import { renderAudioAttachment } from './renderAudioAttachment';
 import { renderEmojiPicker } from './renderEmojiPicker';
 import { getContactNameColorSelector } from '../selectors/conversations';
 
-type MessageDetailProps = ComponentProps<typeof MessageDetail>;
-
 export { Contact } from '../../components/conversation/MessageDetail';
-
-export type OwnProps = Pick<
+export type OwnProps = Omit<
   MessageDetailProps,
-  | 'clearSelectedMessage'
-  | 'checkForAccount'
-  | 'contacts'
-  | 'deleteMessage'
-  | 'deleteMessageForEveryone'
-  | 'displayTapToViewMessage'
-  | 'downloadAttachment'
-  | 'doubleCheckMissingQuoteReference'
-  | 'errors'
-  | 'kickOffAttachmentDownload'
-  | 'markAttachmentAsCorrupted'
-  | 'markViewed'
-  | 'message'
-  | 'openConversation'
-  | 'openLink'
-  | 'reactToMessage'
-  | 'receivedAt'
-  | 'replyToMessage'
-  | 'retrySend'
-  | 'sendAnyway'
-  | 'sentAt'
-  | 'showContactDetail'
-  | 'showContactModal'
-  | 'showExpiredIncomingTapToViewToast'
-  | 'showExpiredOutgoingTapToViewToast'
-  | 'showForwardMessageModal'
-  | 'showSafetyNumber'
-  | 'showVisualAttachment'
+  'i18n' | 'interactionMode' | 'renderAudioAttachment' | 'renderEmojiPicker'
 >;
 
 const mapStateToProps = (
@@ -63,13 +35,7 @@ const mapStateToProps = (
     sendAnyway,
     showSafetyNumber,
 
-    checkForAccount,
-    clearSelectedMessage,
-    deleteMessage,
-    deleteMessageForEveryone,
     displayTapToViewMessage,
-    downloadAttachment,
-    doubleCheckMissingQuoteReference,
     kickOffAttachmentDownload,
     markAttachmentAsCorrupted,
     markViewed,
@@ -108,13 +74,7 @@ const mapStateToProps = (
     sendAnyway,
     showSafetyNumber,
 
-    checkForAccount,
-    clearSelectedMessage,
-    deleteMessage,
-    deleteMessageForEveryone,
     displayTapToViewMessage,
-    downloadAttachment,
-    doubleCheckMissingQuoteReference,
     kickOffAttachmentDownload,
     markAttachmentAsCorrupted,
     markViewed,
diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts
index 4bfbaa61aa60..b2ba5e6f98db 100644
--- a/ts/types/Attachment.ts
+++ b/ts/types/Attachment.ts
@@ -73,28 +73,55 @@ export type DownloadedAttachmentType = AttachmentType & {
   data: ArrayBuffer;
 };
 
-type BaseAttachmentDraftType = {
+export type BaseAttachmentDraftType = {
   blurHash?: string;
   contentType: MIME.MIMEType;
   fileName: string;
+  path: string;
   screenshotContentType?: string;
   screenshotSize?: number;
   size: number;
 };
 
-export type InMemoryAttachmentDraftType = {
-  data?: ArrayBuffer;
-  screenshotData?: ArrayBuffer;
-} & BaseAttachmentDraftType;
+export type InMemoryAttachmentDraftType =
+  | ({
+      data?: ArrayBuffer;
+      pending: false;
+      screenshotData?: ArrayBuffer;
+    } & BaseAttachmentDraftType)
+  | {
+      contentType: MIME.MIMEType;
+      fileName: string;
+      path: string;
+      pending: true;
+    };
 
-export type OnDiskAttachmentDraftType = {
-  path?: string;
-  screenshotPath?: string;
-} & BaseAttachmentDraftType;
+export type OnDiskAttachmentDraftType =
+  | ({
+      caption?: string;
+      pending: false;
+      screenshotPath?: string;
+    } & BaseAttachmentDraftType)
+  | {
+      contentType: MIME.MIMEType;
+      fileName: string;
+      path: string;
+      pending: true;
+    };
 
-export type AttachmentDraftType = {
-  url: string;
-} & BaseAttachmentDraftType;
+export type AttachmentDraftType =
+  | ({
+      url: string;
+      screenshotPath?: string;
+      caption?: string;
+      pending: false;
+    } & BaseAttachmentDraftType)
+  | {
+      contentType: MIME.MIMEType;
+      fileName: string;
+      path: string;
+      pending: true;
+    };
 
 export type ThumbnailType = {
   height: number;
diff --git a/ts/types/LinkPreview.ts b/ts/types/LinkPreview.ts
index 607be82c8e54..697cb709d6a2 100644
--- a/ts/types/LinkPreview.ts
+++ b/ts/types/LinkPreview.ts
@@ -69,9 +69,13 @@ export function findLinks(text: string, caretLocation?: number): Array<string> {
   );
 }
 
-export function getDomain(href: string): string | undefined {
+export function getDomain(href: string): string {
   const url = maybeParseUrl(href);
-  return url ? url.hostname : undefined;
+  if (!url || !url.hostname) {
+    throw new Error('getDomain: Unable to extract hostname from href');
+  }
+
+  return url.hostname;
 }
 
 // See <https://tools.ietf.org/html/rfc3986>.
diff --git a/ts/util/handleImageAttachment.ts b/ts/util/handleImageAttachment.ts
index b1fab77f9ae7..655eb09c4401 100644
--- a/ts/util/handleImageAttachment.ts
+++ b/ts/util/handleImageAttachment.ts
@@ -48,11 +48,13 @@ export async function handleImageAttachment(
   const blurHash = await imageToBlurHash(resizedBlob);
 
   return {
-    fileName: fileName || file.name,
+    blurHash,
     contentType,
     data,
+    fileName: fileName || file.name,
+    path: file.name,
+    pending: false,
     size: data.byteLength,
-    blurHash,
   };
 }
 
diff --git a/ts/util/longRunningTaskWrapper.ts b/ts/util/longRunningTaskWrapper.ts
index 0ef131e51d34..5c7c36f56d4f 100644
--- a/ts/util/longRunningTaskWrapper.ts
+++ b/ts/util/longRunningTaskWrapper.ts
@@ -16,7 +16,7 @@ export async function longRunningTaskWrapper<T>({
   const ONE_SECOND = 1000;
   const TWO_SECONDS = 2000;
 
-  let progressView: typeof window.Whisper.ReactWrapperView | undefined;
+  let progressView: Backbone.View | undefined;
   let spinnerStart;
   let progressTimeout: NodeJS.Timeout | undefined = setTimeout(() => {
     window.log.info(`longRunningTaskWrapper/${idLog}: Creating spinner`);
@@ -76,11 +76,13 @@ export async function longRunningTaskWrapper<T>({
 
       // Note: this component uses a portal to render itself into the top-level DOM. No
       //   need to attach it to the DOM here.
-      const errorView = new window.Whisper.ReactWrapperView({
+      const errorView: Backbone.View = new window.Whisper.ReactWrapperView({
         className: 'error-modal-wrapper',
         Component: window.Signal.Components.ErrorModal,
         props: {
-          onClose: () => errorView.remove(),
+          onClose: (): void => {
+            errorView.remove();
+          },
         },
       });
     }
diff --git a/ts/views/conversation_view.ts b/ts/views/conversation_view.ts
index cf5d2e9e0d6f..873f5a1de66b 100644
--- a/ts/views/conversation_view.ts
+++ b/ts/views/conversation_view.ts
@@ -3,6 +3,8 @@
 
 import nodePath from 'path';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
+import { debounce, flatten, omit, pick, reject, throttle } from 'lodash';
+import { render } from 'mustache';
 
 import {
   AttachmentDraftType,
@@ -13,10 +15,12 @@ import {
 } from '../types/Attachment';
 import type { StickerPackType as StickerPackDBType } from '../sql/Interface';
 import * as Stickers from '../types/Stickers';
+import { BodyRangeType, BodyRangesType } from '../types/Util';
 import {
   IMAGE_JPEG,
   IMAGE_WEBP,
   isHeic,
+  MIMEType,
   stringToMIMEType,
 } from '../types/MIME';
 import { ConversationModel } from '../models/conversations';
@@ -24,6 +28,8 @@ import {
   GroupV2PendingMemberType,
   MessageModelCollectionType,
   MessageAttributesType,
+  ConversationModelCollectionType,
+  QuotedMessageType,
 } from '../model-types.d';
 import { LinkPreviewType } from '../types/message/LinkPreviews';
 import {
@@ -31,7 +37,7 @@ import {
   MessageAttributesType as MediaItemMessageType,
 } from '../types/MediaItem';
 import { MessageModel } from '../models/messages';
-import { assert } from '../util/assert';
+import { strictAssert } from '../util/assert';
 import { maybeParseUrl } from '../util/url';
 import { addReportSpamJob } from '../jobs/helpers/addReportSpamJob';
 import { reportSpamJobQueue } from '../jobs/reportSpamJobQueue';
@@ -57,8 +63,8 @@ import {
 import { ConversationDetailsMembershipList } from '../components/conversation/conversation-details/ConversationDetailsMembershipList';
 import { showSafetyNumberChangeDialog } from '../shims/showSafetyNumberChangeDialog';
 import {
-  LinkPreviewImage,
   LinkPreviewResult,
+  LinkPreviewImage,
   LinkPreviewWithDomain,
 } from '../types/LinkPreview';
 import * as LinkPreview from '../types/LinkPreview';
@@ -72,7 +78,10 @@ import { markViewed } from '../services/MessageUpdater';
 import { viewedReceiptsJobQueue } from '../jobs/viewedReceiptsJobQueue';
 import { viewSyncJobQueue } from '../jobs/viewSyncJobQueue';
 import type { EmbeddedContactType } from '../types/EmbeddedContact';
-import type { WhatIsThis } from '../window.d';
+import type { AnyViewClass, BasicReactWrapperViewClass } from '../window.d';
+import { isNotNil } from '../util/isNotNil';
+import { dropNull } from '../util/dropNull';
+import { CompositionAPIType } from '../components/CompositionArea';
 
 type AttachmentOptions = {
   messageId: string;
@@ -113,6 +122,68 @@ const {
   getNewerMessagesByConversation,
 } = window.Signal.Data;
 
+type MessageActionsType = {
+  deleteMessage: (messageId: string) => unknown;
+  deleteMessageForEveryone: (messageId: string) => unknown;
+  displayTapToViewMessage: (messageId: string) => unknown;
+  downloadAttachment: (options: {
+    attachment: AttachmentType;
+    timestamp: number;
+    isDangerous: boolean;
+  }) => unknown;
+  downloadNewVersion: () => unknown;
+  kickOffAttachmentDownload: (
+    options: Readonly<{ messageId: string }>
+  ) => unknown;
+  markAttachmentAsCorrupted: (options: AttachmentOptions) => unknown;
+  markViewed: (messageId: string) => unknown;
+  openConversation: (conversationId: string, messageId?: string) => unknown;
+  openLink: (url: string) => unknown;
+  reactToMessage: (
+    messageId: string,
+    reaction: { emoji: string; remove: boolean }
+  ) => unknown;
+  replyToMessage: (messageId: string) => unknown;
+  retrySend: (messageId: string) => unknown;
+  sendAnyway: (contactId: string, messageId: string) => unknown;
+  showContactDetail: (options: {
+    contact: EmbeddedContactType;
+    signalAccount?: string;
+  }) => unknown;
+  showContactModal: (contactId: string) => unknown;
+  showSafetyNumber: (contactId: string) => unknown;
+  showExpiredIncomingTapToViewToast: () => unknown;
+  showExpiredOutgoingTapToViewToast: () => unknown;
+  showForwardMessageModal: (messageId: string) => unknown;
+  showIdentity: (conversationId: string) => unknown;
+  showMessageDetail: (messageId: string) => unknown;
+  showVisualAttachment: (options: {
+    attachment: AttachmentType;
+    messageId: string;
+    showSingle?: boolean;
+  }) => unknown;
+};
+
+type MediaType = {
+  path: string;
+  objectURL: string;
+  thumbnailObjectUrl?: string;
+  contentType: MIMEType;
+  index: number;
+  attachment: AttachmentType;
+  message: {
+    attachments: Array<AttachmentType>;
+    conversationId: string;
+    id: string;
+    // eslint-disable-next-line camelcase
+    received_at: number;
+    // eslint-disable-next-line camelcase
+    received_at_ms: number;
+    // eslint-disable-next-line camelcase
+    sent_at: number;
+  };
+};
+
 Whisper.ExpiredToast = Whisper.ToastView.extend({
   render_attributes() {
     return { toastMessage: window.i18n('expiredWarning') };
@@ -421,28 +492,69 @@ const ReportedSpamAndBlockedToast = Whisper.ToastView.extend({
     window.i18n('MessageRequests--block-and-report-spam-success-toast'),
 });
 
-Whisper.ConversationLoadingScreen = Whisper.View.extend({
-  template: () => $('#conversation-loading-screen').html(),
-  className: 'conversation-loading-screen',
-});
+export class ConversationView extends window.Backbone.View<ConversationModel> {
+  // Debounced functions
+  private debouncedMaybeGrabLinkPreview: (
+    message: string,
+    caretLocation?: number
+  ) => void;
+  private debouncedSaveDraft: (
+    messageText: string,
+    bodyRanges: Array<BodyRangeType>
+  ) => Promise<void>;
+  private lazyUpdateVerified: () => void;
 
-Whisper.ConversationView = Whisper.View.extend({
-  className() {
-    const { model }: { model: ConversationModel } = this;
-    return ['conversation', model.get('type')].join(' ');
-  },
-  id() {
-    const { model }: { model: ConversationModel } = this;
-    return `conversation-${model.cid}`;
-  },
-  template: () => $('#conversation').html(),
-  render_attributes() {
-    return {
-      'send-message': window.i18n('sendMessage'),
-    };
-  },
-  initialize() {
-    const { model }: { model: ConversationModel } = this;
+  // Composing messages
+  private compositionApi: {
+    current?: CompositionAPIType;
+  } = { current: undefined };
+  private sendStart?: number;
+  private voiceNoteAttachment?: AttachmentType;
+
+  // Quotes
+  private quote?: QuotedMessageType;
+  private quotedMessage?: MessageModel;
+
+  // Previews
+  private currentlyMatchedLink?: string;
+  private disableLinkPreviews?: boolean;
+  private excludedPreviewUrls: Array<string> = [];
+  private linkPreviewAbortController?: AbortController;
+  private preview?: Array<LinkPreviewResult>;
+
+  // Sub-views
+  private captionEditorView?: Backbone.View;
+  private captureAudioView?: Backbone.View;
+  private compositionAreaView?: Backbone.View;
+  private contactModalView?: Backbone.View;
+  private forwardMessageModal?: Backbone.View;
+  private lightboxView?: BasicReactWrapperViewClass;
+  private migrationDialog?: Backbone.View;
+  private stickerPreviewModalView?: Backbone.View;
+  private timelineView?: Backbone.View;
+  private titleView?: Backbone.View;
+
+  // Panel support
+  private panels: Array<AnyViewClass> = [];
+  private previousFocus?: HTMLElement;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(...args: Array<any>) {
+    super(...args);
+
+    this.lazyUpdateVerified = debounce(
+      this.model.updateVerified.bind(this.model),
+      1000 // one second
+    );
+    this.model.throttledGetProfiles =
+      this.model.throttledGetProfiles ||
+      throttle(this.model.getProfiles.bind(this.model), FIVE_MINUTES);
+
+    this.debouncedMaybeGrabLinkPreview = debounce(
+      this.maybeGrabLinkPreview.bind(this),
+      200
+    );
+    this.debouncedSaveDraft = debounce(this.saveDraft.bind(this), 200);
 
     // Events on Conversation model
     this.listenTo(this.model, 'destroy', this.stopListening);
@@ -471,53 +583,70 @@ Whisper.ConversationView = Whisper.View.extend({
         this.setQuoteMessage(target);
       }
     );
-    this.listenTo(model, 'save-attachment', this.downloadAttachmentWrapper);
-    this.listenTo(model, 'delete-message', this.deleteMessage);
-    this.listenTo(model, 'remove-link-review', this.removeLinkPreview);
-    this.listenTo(model, 'remove-all-draft-attachments', this.clearAttachments);
-
-    this.lazyUpdateVerified = window._.debounce(
-      model.updateVerified.bind(model),
-      1000 // one second
+    this.listenTo(
+      this.model,
+      'save-attachment',
+      this.downloadAttachmentWrapper
     );
-    this.model.throttledGetProfiles =
-      this.model.throttledGetProfiles ||
-      window._.throttle(this.model.getProfiles.bind(this.model), FIVE_MINUTES);
-
-    this.debouncedMaybeGrabLinkPreview = window._.debounce(
-      this.maybeGrabLinkPreview.bind(this),
-      200
+    this.listenTo(this.model, 'delete-message', this.deleteMessage);
+    this.listenTo(this.model, 'remove-link-review', this.removeLinkPreview);
+    this.listenTo(
+      this.model,
+      'remove-all-draft-attachments',
+      this.clearAttachments
     );
-    this.debouncedSaveDraft = window._.debounce(this.saveDraft.bind(this), 200);
 
     this.render();
 
-    this.loadingScreen = new Whisper.ConversationLoadingScreen();
-    this.loadingScreen.render();
-    this.loadingScreen.$el.prependTo(this.$('.discussion-container'));
-
     this.setupHeader();
     this.setupTimeline();
     this.setupCompositionArea();
-
-    this.linkPreviewAbortController = null;
     this.updateAttachmentsView();
-  },
+  }
 
-  events: {
-    'click .capture-audio .microphone': 'captureAudio',
-    'change input.file-input': 'onChoseAttachment',
+  // eslint-disable-next-line class-methods-use-this
+  events(): Record<string, string> {
+    return {
+      'click .capture-audio .microphone': 'captureAudio',
+      'change input.file-input': 'onChoseAttachment',
 
-    dragover: 'onDragOver',
-    dragleave: 'onDragLeave',
-    drop: 'onDrop',
-    paste: 'onPaste',
-  },
+      drop: 'onDrop',
+      paste: 'onPaste',
+    };
+  }
 
-  getMuteExpirationLabel() {
-    const { model }: { model: ConversationModel } = this;
-    const muteExpiresAt = model.get('muteExpiresAt');
-    if (!model.isMuted()) {
+  // We need this ignore because the backbone types really want this to be a string
+  //   property, but the property isn't set until after super() is run, meaning that this
+  //   classname wouldn't be applied when Backbone creates our el.
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  // eslint-disable-next-line class-methods-use-this
+  className(): string {
+    return 'conversation';
+  }
+
+  // Same situation as className().
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  // eslint-disable-next-line class-methods-use-this
+  id(): string {
+    return `conversation-${this.model.cid}`;
+  }
+
+  // Backbone.View<ConversationModel> is demanded as the return type here, and we can't
+  //   satisfy it because of the above difference in signature: className is a function
+  //   when it should be a plain string property.
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  render(): ConversationView {
+    const template = $('#conversation').html();
+    this.$el.html(render(template, {}));
+    return this;
+  }
+
+  getMuteExpirationLabel(): string | undefined {
+    const muteExpiresAt = this.model.get('muteExpiresAt');
+    if (!this.model.isMuted()) {
       return;
     }
 
@@ -531,19 +660,15 @@ Whisper.ConversationView = Whisper.View.extend({
 
     // eslint-disable-next-line consistent-return
     return expires.format('M/D/YY, hh:mm A');
-  },
+  }
 
   setMuteExpiration(ms = 0): void {
-    const { model }: { model: ConversationModel } = this;
-
-    model.setMuteExpiration(
+    this.model.setMuteExpiration(
       ms >= Number.MAX_SAFE_INTEGER ? ms : Date.now() + ms
     );
-  },
-
-  setPin(value: boolean) {
-    const { model }: { model: ConversationModel } = this;
+  }
 
+  setPin(value: boolean): void {
     if (value) {
       const pinnedConversationIds = window.storage.get(
         'pinnedConversationIds',
@@ -554,21 +679,19 @@ Whisper.ConversationView = Whisper.View.extend({
         this.showToast(Whisper.PinnedConversationsFullToast);
         return;
       }
-      model.pin();
+      this.model.pin();
     } else {
-      model.unpin();
+      this.model.unpin();
     }
-  },
-
-  setupHeader() {
-    const { model }: { model: ConversationModel } = this;
+  }
 
+  setupHeader(): void {
     this.titleView = new Whisper.ReactWrapperView({
       className: 'title-wrapper',
       JSX: window.Signal.State.Roots.createConversationHeader(
         window.reduxStore,
         {
-          id: model.id,
+          id: this.model.id,
 
           onShowContactModal: this.showContactModal.bind(this),
           onSetDisappearingMessages: (seconds: number) =>
@@ -577,10 +700,10 @@ Whisper.ConversationView = Whisper.View.extend({
           onResetSession: () => this.endSession(),
           onSearchInConversation: () => {
             const { searchInConversation } = window.reduxActions.search;
-            const name = isMe(model.attributes)
+            const name = isMe(this.model.attributes)
               ? window.i18n('noteToSelf')
-              : model.getTitle();
-            searchInConversation(model.id, name);
+              : this.model.getTitle();
+            searchInConversation(this.model.id, name);
           },
           onSetMuteNotifications: this.setMuteExpiration.bind(this),
           onSetPin: this.setPin.bind(this),
@@ -598,7 +721,7 @@ Whisper.ConversationView = Whisper.View.extend({
                 'onOutgoingAudioCallInConversation: call is deemed "safe". Making call'
               );
               await window.Signal.Services.calling.startCallingLobby(
-                model.id,
+                this.model.id,
                 isVideoCall
               );
               window.log.info(
@@ -617,7 +740,10 @@ Whisper.ConversationView = Whisper.View.extend({
             );
             const isVideoCall = true;
 
-            if (model.get('announcementsOnly') && !model.areWeAdmin()) {
+            if (
+              this.model.get('announcementsOnly') &&
+              !this.model.areWeAdmin()
+            ) {
               this.showToast(Whisper.CannotStartGroupCallToast);
               return;
             }
@@ -627,7 +753,7 @@ Whisper.ConversationView = Whisper.View.extend({
                 'onOutgoingVideoCallInConversation: call is deemed "safe". Making call'
               );
               await window.Signal.Services.calling.startCallingLobby(
-                model.id,
+                this.model.id,
                 isVideoCall
               );
               window.log.info(
@@ -660,8 +786,8 @@ Whisper.ConversationView = Whisper.View.extend({
           },
 
           onArchive: () => {
-            model.setArchived(true);
-            model.trigger('unload', 'archive');
+            this.model.setArchived(true);
+            this.model.trigger('unload', 'archive');
 
             Whisper.ToastView.show(
               Whisper.ConversationArchivedToast,
@@ -669,7 +795,7 @@ Whisper.ConversationView = Whisper.View.extend({
             );
           },
           onMarkUnread: () => {
-            model.setMarkedUnread(true);
+            this.model.setMarkedUnread(true);
 
             Whisper.ToastView.show(
               Whisper.ConversationMarkedUnreadToast,
@@ -677,7 +803,7 @@ Whisper.ConversationView = Whisper.View.extend({
             );
           },
           onMoveToInbox: () => {
-            model.setArchived(false);
+            this.model.setArchived(false);
 
             Whisper.ToastView.show(
               Whisper.ConversationUnarchivedToast,
@@ -689,16 +815,11 @@ Whisper.ConversationView = Whisper.View.extend({
     });
     this.$('.conversation-header').append(this.titleView.el);
     window.reduxActions.conversations.setSelectedConversationHeaderTitle();
-  },
+  }
 
-  setupCompositionArea() {
+  setupCompositionArea(): void {
     window.reduxActions.composer.resetComposer();
 
-    const { model }: { model: ConversationModel } = this;
-
-    const compositionApi = { current: null };
-    this.compositionApi = compositionApi;
-
     const micCellEl = $(`
         <div class="capture-audio">
           <button class="microphone"></button>
@@ -708,56 +829,56 @@ Whisper.ConversationView = Whisper.View.extend({
     const messageRequestEnum = Proto.SyncMessage.MessageRequestResponse.Type;
 
     const props = {
-      id: model.id,
-      compositionApi,
+      id: this.model.id,
+      compositionApi: this.compositionApi,
       onClickAddPack: () => this.showStickerManager(),
       onPickSticker: (packId: string, stickerId: number) =>
         this.sendStickerMessage({ packId, stickerId }),
       onSubmit: (
         message: string,
-        mentions: typeof window.Whisper.BodyRangesType,
+        mentions: BodyRangesType,
         timestamp: number
       ) => this.sendMessage(message, mentions, { timestamp }),
       onEditorStateChange: (
         msg: string,
-        bodyRanges: Array<typeof window.Whisper.BodyRangeType>,
+        bodyRanges: Array<BodyRangeType>,
         caretLocation?: number
       ) => this.onEditorStateChange(msg, bodyRanges, caretLocation),
       onTextTooLong: () => this.showToast(Whisper.MessageBodyTooLongToast),
       onChooseAttachment: this.onChooseAttachment.bind(this),
-      getQuotedMessage: () => model.get('quotedMessageId'),
+      getQuotedMessage: () => this.model.get('quotedMessageId'),
       clearQuotedMessage: () => this.setQuoteMessage(null),
       micCellEl,
       onAccept: () => {
         this.syncMessageRequestResponse(
           'onAccept',
-          model,
+          this.model,
           messageRequestEnum.ACCEPT
         );
       },
       onBlock: () => {
         this.syncMessageRequestResponse(
           'onBlock',
-          model,
+          this.model,
           messageRequestEnum.BLOCK
         );
       },
       onUnblock: () => {
         this.syncMessageRequestResponse(
           'onUnblock',
-          model,
+          this.model,
           messageRequestEnum.ACCEPT
         );
       },
       onDelete: () => {
         this.syncMessageRequestResponse(
           'onDelete',
-          model,
+          this.model,
           messageRequestEnum.DELETE
         );
       },
       onBlockAndReportSpam: () => {
-        this.blockAndReportSpam(model);
+        this.blockAndReportSpam(this.model);
       },
       onStartGroupMigration: () => this.startMigrationToGV2(),
       onCancelJoinRequest: async () => {
@@ -770,7 +891,7 @@ Whisper.ConversationView = Whisper.View.extend({
           resolve: () => {
             this.longRunningTaskWrapper({
               name: 'onCancelJoinRequest',
-              task: async () => model.cancelJoinRequest(),
+              task: async () => this.model.cancelJoinRequest(),
             });
           },
         });
@@ -784,7 +905,7 @@ Whisper.ConversationView = Whisper.View.extend({
         window.reduxActions.composer.setMediaQualitySetting(isHQ);
       },
 
-      onClickQuotedMessage: (id?: string) => this.scrollToMessage(id),
+      onClickQuotedMessage: (id: string) => this.scrollToMessage(id),
 
       onCloseLinkPreview: () => {
         this.disableLinkPreviews = true;
@@ -804,7 +925,7 @@ Whisper.ConversationView = Whisper.View.extend({
 
     // Finally, add it to the DOM
     this.$('.CompositionArea__placeholder').append(this.compositionAreaView.el);
-  },
+  }
 
   async longRunningTaskWrapper<T>({
     name,
@@ -813,16 +934,15 @@ Whisper.ConversationView = Whisper.View.extend({
     name: string;
     task: () => Promise<T>;
   }): Promise<T> {
-    const { model }: { model: ConversationModel } = this;
-    const idForLogging = model.idForLogging();
+    const idForLogging = this.model.idForLogging();
     return window.Signal.Util.longRunningTaskWrapper({
       name,
       idForLogging,
       task,
     });
-  },
+  }
 
-  getMessageActions() {
+  getMessageActions(): MessageActionsType {
     const reactToMessage = (
       messageId: string,
       reaction: { emoji: string; remove: boolean }
@@ -847,7 +967,7 @@ Whisper.ConversationView = Whisper.View.extend({
     const showContactModal = (contactId: string) => {
       this.showContactModal(contactId);
     };
-    const openConversation = (conversationId: string, messageId: string) => {
+    const openConversation = (conversationId: string, messageId?: string) => {
       this.openConversation(conversationId, messageId);
     };
     const showContactDetail = (options: {
@@ -955,6 +1075,7 @@ Whisper.ConversationView = Whisper.View.extend({
       );
       this.showToast(Whisper.TapToViewExpiredOutgoingToast);
     };
+
     const showForwardMessageModal = this.showForwardMessageModal.bind(this);
 
     return {
@@ -982,12 +1103,9 @@ Whisper.ConversationView = Whisper.View.extend({
       showMessageDetail,
       showVisualAttachment,
     };
-  },
-
-  setupTimeline() {
-    const { model }: { model: ConversationModel } = this;
-    const { id } = model;
+  }
 
+  setupTimeline(): void {
     const messageRequestEnum = Proto.SyncMessage.MessageRequestResponse.Type;
 
     const contactSupport = () => {
@@ -1012,7 +1130,7 @@ Whisper.ConversationView = Whisper.View.extend({
     ) => {
       const { authorId, sentAt } = options;
 
-      const conversationId = model.id;
+      const conversationId = this.model.id;
       const messages = await getMessagesBySentAt(sentAt, {
         MessageCollection: Whisper.MessageCollection,
       });
@@ -1038,7 +1156,7 @@ Whisper.ConversationView = Whisper.View.extend({
         setMessagesLoading,
         repairOldestMessage,
       } = window.reduxActions.conversations;
-      const conversationId = model.id;
+      const conversationId = this.model.id;
 
       setMessagesLoading(conversationId, true);
       const finish = this.setInProgressFetch();
@@ -1074,7 +1192,7 @@ Whisper.ConversationView = Whisper.View.extend({
         const cleaned = await this.cleanModels(models);
         const isNewMessage = false;
         messagesAdded(
-          id,
+          this.model.id,
           cleaned.map((messageModel: MessageModel) => ({
             ...messageModel.attributes,
           })),
@@ -1094,7 +1212,7 @@ Whisper.ConversationView = Whisper.View.extend({
         setMessagesLoading,
         repairNewestMessage,
       } = window.reduxActions.conversations;
-      const conversationId = model.id;
+      const conversationId = this.model.id;
 
       setMessagesLoading(conversationId, true);
       const finish = this.setInProgressFetch();
@@ -1111,7 +1229,7 @@ Whisper.ConversationView = Whisper.View.extend({
 
         const receivedAt = message.get('received_at');
         const sentAt = message.get('sent_at');
-        const models = await getNewerMessagesByConversation(model.id, {
+        const models = await getNewerMessagesByConversation(conversationId, {
           receivedAt,
           sentAt,
           limit: 30,
@@ -1129,7 +1247,7 @@ Whisper.ConversationView = Whisper.View.extend({
         const cleaned = await this.cleanModels(models);
         const isNewMessage = false;
         messagesAdded(
-          id,
+          conversationId,
           cleaned.map((messageModel: MessageModel) => ({
             ...messageModel.attributes,
           })),
@@ -1155,7 +1273,7 @@ Whisper.ConversationView = Whisper.View.extend({
         throw new Error(`markMessageRead: failed to load message ${messageId}`);
       }
 
-      await model.markRead(message.get('received_at'));
+      await this.model.markRead(message.get('received_at'));
     };
 
     const createMessageRequestResponseHandler = (
@@ -1164,9 +1282,8 @@ Whisper.ConversationView = Whisper.View.extend({
     ): ((conversationId: string) => void) => conversationId => {
       const conversation = window.ConversationController.get(conversationId);
       if (!conversation) {
-        assert(
-          false,
-          `Expected a conversation to be found in ${name}. Doing nothing`
+        window.log.error(
+          `createMessageRequestResponseHandler: Expected a conversation to be found in ${name}. Doing nothing`
         );
         return;
       }
@@ -1176,14 +1293,14 @@ Whisper.ConversationView = Whisper.View.extend({
     this.timelineView = new Whisper.ReactWrapperView({
       className: 'timeline-wrapper',
       JSX: window.Signal.State.Roots.createTimeline(window.reduxStore, {
-        id,
+        id: this.model.id,
 
         ...this.getMessageActions(),
 
         acknowledgeGroupMemberNameCollisions: (
           groupNameCollisions: Readonly<GroupNameCollisionsWithIdsByTitle>
         ): void => {
-          model.acknowledgeGroupMemberNameCollisions(groupNameCollisions);
+          this.model.acknowledgeGroupMemberNameCollisions(groupNameCollisions);
         },
         contactSupport,
         learnMoreAboutDeliveryIssue,
@@ -1201,9 +1318,8 @@ Whisper.ConversationView = Whisper.View.extend({
             conversationId
           );
           if (!conversation) {
-            assert(
-              false,
-              'Expected a conversation to be found in onBlockAndReportSpam. Doing nothing'
+            window.log.error(
+              `onBlockAndReportSpam: Expected a conversation to be found for ${conversationId}. Doing nothing.`
             );
             return;
           }
@@ -1221,25 +1337,26 @@ Whisper.ConversationView = Whisper.View.extend({
         removeMember: (conversationId: string) => {
           this.longRunningTaskWrapper({
             name: 'removeMember',
-            task: () => model.removeFromGroupV2(conversationId),
+            task: () => this.model.removeFromGroupV2(conversationId),
           });
         },
         scrollToQuotedMessage,
         unblurAvatar: () => {
-          model.unblurAvatar();
+          this.model.unblurAvatar();
         },
-        updateSharedGroups: model.throttledUpdateSharedGroups,
+        updateSharedGroups: this.model.throttledUpdateSharedGroups,
       }),
     });
 
     this.$('.timeline-placeholder').append(this.timelineView.el);
-  },
+  }
 
-  showToast(
+  private showToast(
     ToastView: typeof window.Whisper.ToastView,
-    options: WhatIsThis,
-    element: Element
-  ) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    options?: any,
+    element?: Element
+  ): void {
     const toast = new ToastView(options);
 
     if (element) {
@@ -1254,8 +1371,9 @@ Whisper.ConversationView = Whisper.View.extend({
     }
 
     toast.render();
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   async cleanModels(
     collection: MessageModelCollectionType | Array<MessageModel>
   ): Promise<Array<MessageModel>> {
@@ -1288,10 +1406,9 @@ Whisper.ConversationView = Whisper.View.extend({
     }
 
     return result;
-  },
+  }
 
-  async scrollToMessage(messageId: string) {
-    const { model }: { model: ConversationModel } = this;
+  async scrollToMessage(messageId: string): Promise<void> {
     const message = await getMessageById(messageId, {
       Message: Whisper.Message,
     });
@@ -1309,45 +1426,45 @@ Whisper.ConversationView = Whisper.View.extend({
 
     // Message might be in memory, but not in the redux anymore because
     // we call `messageReset()` in `loadAndScroll()`.
-    const messagesByConversation = getMessagesByConversation(state)[model.id];
+    const messagesByConversation = getMessagesByConversation(state)[
+      this.model.id
+    ];
     if (!messagesByConversation?.messageIds.includes(messageId)) {
       isInMemory = false;
     }
 
     if (isInMemory) {
       const { scrollToMessage } = window.reduxActions.conversations;
-      scrollToMessage(model.id, messageId);
+      scrollToMessage(this.model.id, messageId);
       return;
     }
 
     this.loadAndScroll(messageId);
-  },
+  }
 
-  setInProgressFetch() {
-    const { model }: { model: ConversationModel } = this;
+  setInProgressFetch(): () => unknown {
     let resolvePromise: (value?: unknown) => void;
-    model.inProgressFetch = new Promise(resolve => {
+    this.model.inProgressFetch = new Promise(resolve => {
       resolvePromise = resolve;
     });
 
     const finish = () => {
       resolvePromise();
-      this.model.inProgressFetch = null;
+      this.model.inProgressFetch = undefined;
     };
 
     return finish;
-  },
+  }
 
   async loadAndScroll(
     messageId: string,
     options?: { disableScroll?: boolean }
-  ) {
-    const { model }: { model: ConversationModel } = this;
+  ): Promise<void> {
     const {
       messagesReset,
       setMessagesLoading,
     } = window.reduxActions.conversations;
-    const conversationId = model.id;
+    const conversationId = this.model.id;
 
     setMessagesLoading(conversationId, true);
     const finish = this.setInProgressFetch();
@@ -1399,7 +1516,7 @@ Whisper.ConversationView = Whisper.View.extend({
     } finally {
       finish();
     }
-  },
+  }
 
   async loadNewestMessages(
     newestMessageId: string | undefined,
@@ -1409,9 +1526,7 @@ Whisper.ConversationView = Whisper.View.extend({
       messagesReset,
       setMessagesLoading,
     } = window.reduxActions.conversations;
-    const { model }: { model: ConversationModel } = this;
-
-    const conversationId = model.id;
+    const conversationId = this.model.id;
 
     setMessagesLoading(conversationId, true);
     const finish = this.setInProgressFetch();
@@ -1442,7 +1557,7 @@ Whisper.ConversationView = Whisper.View.extend({
       //   oldest messages, to ensure that the ConversationHero is shown. We don't want to
       //   scroll directly to the oldest message, because that could scroll the hero off
       //   the screen.
-      if (!newestMessageId && !model.getAccepted() && metrics.oldest) {
+      if (!newestMessageId && !this.model.getAccepted() && metrics.oldest) {
         this.loadAndScroll(metrics.oldest.id, { disableScroll: true });
         return;
       }
@@ -1484,13 +1599,12 @@ Whisper.ConversationView = Whisper.View.extend({
     } finally {
       finish();
     }
-  },
+  }
 
   async startMigrationToGV2(): Promise<void> {
-    const { model }: { model: ConversationModel } = this;
-    const logId = model.idForLogging();
+    const logId = this.model.idForLogging();
 
-    if (!isGroupV1(model.attributes)) {
+    if (!isGroupV1(this.model.attributes)) {
       throw new Error(
         `startMigrationToGV2/${logId}: Cannot start, not a GroupV1 group`
       );
@@ -1509,7 +1623,7 @@ Whisper.ConversationView = Whisper.View.extend({
 
       this.longRunningTaskWrapper({
         name: 'initiateMigrationToGroupV2',
-        task: () => window.Signal.Groups.initiateMigrationToGroupV2(model),
+        task: () => window.Signal.Groups.initiateMigrationToGroupV2(this.model),
       });
     };
 
@@ -1520,7 +1634,7 @@ Whisper.ConversationView = Whisper.View.extend({
       pendingMembersV2,
     } = await this.longRunningTaskWrapper({
       name: 'getGroupMigrationMembers',
-      task: () => window.Signal.Groups.getGroupMigrationMembers(model),
+      task: () => window.Signal.Groups.getGroupMigrationMembers(this.model),
     });
 
     const invitedMemberIds = pendingMembersV2.map(
@@ -1541,12 +1655,12 @@ Whisper.ConversationView = Whisper.View.extend({
         }
       ),
     });
-  },
+  }
 
-  onChooseAttachment() {
+  onChooseAttachment(): void {
     this.$('input.file-input').click();
-  },
-  async onChoseAttachment() {
+  }
+  async onChoseAttachment(): Promise<void> {
     const fileField = this.$('input.file-input');
     const files = fileField.prop('files');
 
@@ -1557,21 +1671,20 @@ Whisper.ConversationView = Whisper.View.extend({
       this.toggleMicrophone();
     }
 
-    fileField.val(null);
-  },
+    fileField.val([]);
+  }
 
-  unload(reason: string) {
-    const { model }: { model: ConversationModel } = this;
+  unload(reason: string): void {
     window.log.info(
       'unloading conversation',
-      model.idForLogging(),
+      this.model.idForLogging(),
       'due to:',
       reason
     );
 
     const { conversationUnloaded } = window.reduxActions.conversations;
     if (conversationUnloaded) {
-      conversationUnloaded(model.id);
+      conversationUnloaded(this.model.id);
     }
 
     if (this.model.get('draftChanged')) {
@@ -1591,12 +1704,12 @@ Whisper.ConversationView = Whisper.View.extend({
       // We don't wait here; we need to take down the view
       this.saveModel();
 
-      model.updateLastMessage();
+      this.model.updateLastMessage();
     }
 
-    this.titleView.remove();
-    this.timelineView.remove();
-    this.compositionAreaView.remove();
+    this.titleView?.remove();
+    this.timelineView?.remove();
+    this.compositionAreaView?.remove();
 
     if (this.captionEditorView) {
       this.captionEditorView.remove();
@@ -1604,27 +1717,15 @@ Whisper.ConversationView = Whisper.View.extend({
     if (this.contactModalView) {
       this.contactModalView.remove();
     }
-    if (this.stickerButtonView) {
-      this.stickerButtonView.remove();
-    }
     if (this.stickerPreviewModalView) {
       this.stickerPreviewModalView.remove();
     }
     if (this.captureAudioView) {
       this.captureAudioView.remove();
     }
-    if (this.lastSeenIndicator) {
-      this.lastSeenIndicator.remove();
-    }
-    if (this.scrollDownButton) {
-      this.scrollDownButton.remove();
-    }
     if (this.lightboxView) {
       this.lightboxView.remove();
     }
-    if (this.lightboxGalleryView) {
-      this.lightboxGalleryView.remove();
-    }
     if (this.panels && this.panels.length) {
       for (let i = 0, max = this.panels.length; i < max; i += 1) {
         const panel = this.panels[i];
@@ -1637,66 +1738,69 @@ Whisper.ConversationView = Whisper.View.extend({
     this.disableLinkPreviews = true;
 
     this.remove();
-  },
+  }
 
-  navigateTo(url: string) {
+  // eslint-disable-next-line class-methods-use-this
+  navigateTo(url: string): void {
     window.location.href = url;
-  },
+  }
 
-  downloadNewVersion() {
+  downloadNewVersion(): void {
     this.navigateTo('https://signal.org/download');
-  },
+  }
 
-  onDragOver(e: WhatIsThis) {
-    if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
+  async onDrop(e: JQuery.TriggeredEvent): Promise<void> {
+    if (!e.originalEvent) {
+      return;
+    }
+    const event = e.originalEvent as DragEvent;
+    if (!event.dataTransfer) {
       return;
     }
 
-    e.stopPropagation();
-    e.preventDefault();
-    this.$el.addClass('dropoff');
-  },
-
-  onDragLeave(e: WhatIsThis) {
-    if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
-      return;
-    }
-
-    e.stopPropagation();
-    e.preventDefault();
-  },
-
-  async onDrop(e: WhatIsThis) {
-    if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
+    if (event.dataTransfer.types[0] !== 'Files') {
       return;
     }
 
     e.stopPropagation();
     e.preventDefault();
 
-    const { files } = e.originalEvent.dataTransfer;
+    const { files } = event.dataTransfer;
     for (let i = 0, max = files.length; i < max; i += 1) {
       const file = files[i];
       this.maybeAddAttachment(file);
     }
-  },
+  }
+
+  onPaste(e: JQuery.TriggeredEvent): void {
+    if (!e.originalEvent) {
+      return;
+    }
+    const event = e.originalEvent as ClipboardEvent;
+    if (!event.clipboardData) {
+      return;
+    }
+    const { items } = event.clipboardData;
+
+    const anyImages = [...items].some(
+      item => item.type.split('/')[0] === 'image'
+    );
+    if (!anyImages) {
+      return;
+    }
+
+    e.stopPropagation();
+    e.preventDefault();
 
-  onPaste(e: WhatIsThis) {
-    const { items } = e.originalEvent.clipboardData;
-    let imgBlob = null;
     for (let i = 0; i < items.length; i += 1) {
       if (items[i].type.split('/')[0] === 'image') {
-        imgBlob = items[i].getAsFile();
+        const file = items[i].getAsFile();
+        if (file) {
+          this.maybeAddAttachment(file);
+        }
       }
     }
-    if (imgBlob !== null) {
-      const file = imgBlob;
-      this.maybeAddAttachment(file);
-
-      e.stopPropagation();
-      e.preventDefault();
-    }
-  },
+  }
 
   syncMessageRequestResponse(
     name: string,
@@ -1707,7 +1811,7 @@ Whisper.ConversationView = Whisper.View.extend({
       name,
       task: model.syncMessageRequestResponse.bind(model, messageRequestType),
     });
-  },
+  }
 
   blockAndReportSpam(model: ConversationModel): Promise<void> {
     const messageRequestEnum = Proto.SyncMessage.MessageRequestResponse.Type;
@@ -1727,38 +1831,58 @@ Whisper.ConversationView = Whisper.View.extend({
         this.showToast(ReportedSpamAndBlockedToast);
       },
     });
-  },
+  }
 
-  onClickAttachment(attachment: WhatIsThis) {
-    const getProps = () => ({
-      url: attachment.url,
-      caption: attachment.caption,
-      attachment,
-      onSave,
-    });
+  onClickAttachment(attachment: AttachmentDraftType): void {
+    if (attachment.pending) {
+      throw new Error(
+        'onClickAttachment: Cannot click to edit pending attachment'
+      );
+    }
 
-    const onSave = (caption: WhatIsThis) => {
+    const getProps = () => {
+      if (attachment.pending) {
+        throw new Error(
+          'onClickAttachment/onSave: Cannot render pending attachment'
+        );
+      }
+
+      return {
+        url: attachment.url,
+        caption: attachment.caption,
+        attachment,
+        onSave,
+      };
+    };
+
+    const onSave = (caption?: string) => {
+      const attachments = this.model.get('draftAttachments') || [];
       this.model.set({
-        draftAttachments: this.model
-          .get('draftAttachments')
-          .map((item: WhatIsThis) => {
-            if (
-              (item.path && item.path === attachment.path) ||
-              (item.screenshotPath &&
-                item.screenshotPath === attachment.screenshotPath)
-            ) {
-              return {
-                ...attachment,
-                caption,
-              };
-            }
-
+        draftAttachments: attachments.map((item: OnDiskAttachmentDraftType) => {
+          if (item.pending || attachment.pending) {
             return item;
-          }),
+          }
+
+          if (
+            (item.path && item.path === attachment.path) ||
+            (item.screenshotPath &&
+              item.screenshotPath === attachment.screenshotPath)
+          ) {
+            return {
+              ...attachment,
+              caption,
+            };
+          }
+
+          return item;
+        }),
         draftChanged: true,
       });
 
-      this.captionEditorView.remove();
+      if (this.captionEditorView) {
+        this.captionEditorView.remove();
+        this.captionEditorView = undefined;
+      }
       window.Signal.Backbone.Views.Lightbox.hide();
 
       this.updateAttachmentsView();
@@ -1772,31 +1896,28 @@ Whisper.ConversationView = Whisper.View.extend({
       onClose: () => window.Signal.Backbone.Views.Lightbox.hide(),
     });
     window.Signal.Backbone.Views.Lightbox.show(this.captionEditorView.el);
-  },
+  }
 
-  async deleteDraftAttachment(attachment: AttachmentType) {
+  // eslint-disable-next-line class-methods-use-this
+  async deleteDraftAttachment(attachment: AttachmentType): Promise<void> {
     if (attachment.screenshotPath) {
       await deleteDraftFile(attachment.screenshotPath);
     }
     if (attachment.path) {
       await deleteDraftFile(attachment.path);
     }
-  },
+  }
 
-  async saveModel() {
-    const { model }: { model: ConversationModel } = this;
-    window.Signal.Data.updateConversation(model.attributes);
-  },
+  async saveModel(): Promise<void> {
+    window.Signal.Data.updateConversation(this.model.attributes);
+  }
 
-  async addAttachment(attachment: InMemoryAttachmentDraftType) {
-    const { model }: { model: ConversationModel } = this;
+  async addAttachment(attachment: InMemoryAttachmentDraftType): Promise<void> {
     const onDisk = await this.writeDraftAttachment(attachment);
 
     // Remove any pending attachments that were transcoding
-    const draftAttachments = (model.get('draftAttachments') || []).filter(
-      draftAttachment =>
-        !draftAttachment.pending &&
-        draftAttachment.fileName !== attachment.fileName
+    const draftAttachments = (this.model.get('draftAttachments') || []).filter(
+      draftAttachment => draftAttachment.path !== attachment.path
     );
     this.model.set({
       draftAttachments: [...draftAttachments, onDisk],
@@ -1804,12 +1925,17 @@ Whisper.ConversationView = Whisper.View.extend({
     this.updateAttachmentsView();
 
     await this.saveModel();
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   resolveOnDiskAttachment(
     attachment: OnDiskAttachmentDraftType
   ): AttachmentDraftType {
     let url = '';
+    if (attachment.pending) {
+      return attachment;
+    }
+
     if (attachment.screenshotPath) {
       url = getAbsoluteDraftPath(attachment.screenshotPath);
     } else if (attachment.path) {
@@ -1819,19 +1945,25 @@ Whisper.ConversationView = Whisper.View.extend({
         'resolveOnDiskAttachment: Attachment was missing both screenshotPath and path fields'
       );
     }
-
     return {
-      ...attachment,
+      ...pick(attachment, [
+        'blurHash',
+        'caption',
+        'contentType',
+        'fileName',
+        'path',
+        'size',
+      ]),
+      pending: false,
       url,
     };
-  },
+  }
 
-  async onCloseAttachment(attachment: Pick<AttachmentType, 'path'>) {
-    const { model }: { model: ConversationModel } = this;
-    const draftAttachments = model.get('draftAttachments') || [];
+  async onCloseAttachment(attachment: AttachmentType): Promise<void> {
+    const draftAttachments = this.model.get('draftAttachments') || [];
 
     this.model.set({
-      draftAttachments: window._.reject(
+      draftAttachments: reject(
         draftAttachments,
         item => item.path === attachment.path
       ),
@@ -1842,13 +1974,12 @@ Whisper.ConversationView = Whisper.View.extend({
 
     await this.saveModel();
     await this.deleteDraftAttachment(attachment);
-  },
+  }
 
-  async clearAttachments() {
-    const { model }: { model: ConversationModel } = this;
-    this.voiceNoteAttachment = null;
+  async clearAttachments(): Promise<void> {
+    this.voiceNoteAttachment = undefined;
 
-    const draftAttachments = model.get('draftAttachments') || [];
+    const draftAttachments = this.model.get('draftAttachments') || [];
     this.model.set({
       draftAttachments: [],
       draftChanged: true,
@@ -1865,33 +1996,33 @@ Whisper.ConversationView = Whisper.View.extend({
         )
       ),
     ]);
-  },
+  }
 
-  hasFiles() {
-    const { model }: { model: ConversationModel } = this;
-    const draftAttachments = model.get('draftAttachments') || [];
+  hasFiles(): boolean {
+    const draftAttachments = this.model.get('draftAttachments') || [];
     return draftAttachments.length > 0;
-  },
+  }
 
-  async getFiles() {
-    const { model }: { model: ConversationModel } = this;
+  async getFiles(): Promise<Array<AttachmentType>> {
     if (this.voiceNoteAttachment) {
       // We don't need to pull these off disk; we return them as-is
       return [this.voiceNoteAttachment];
     }
 
-    const draftAttachments = model.get('draftAttachments') || [];
-    const files = window._.compact(
-      await Promise.all(
-        draftAttachments.map(attachment => this.getFile(attachment))
-      )
+    const draftAttachments = this.model.get('draftAttachments') || [];
+    const items = await Promise.all(
+      draftAttachments.map(attachment => this.getFile(attachment))
     );
-    return files;
-  },
 
-  async getFile(attachment?: AttachmentType) {
-    if (!attachment) {
-      return Promise.resolve();
+    return items.filter(isNotNil);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  async getFile(
+    attachment?: OnDiskAttachmentDraftType
+  ): Promise<AttachmentType | undefined> {
+    if (!attachment || attachment.pending) {
+      return;
     }
 
     const data = await readDraftData(attachment.path);
@@ -1899,84 +2030,98 @@ Whisper.ConversationView = Whisper.View.extend({
       window.log.error(
         `Attachment size from disk ${data.byteLength} did not match attachment size ${attachment.size}`
       );
-      return null;
+      return;
     }
 
     return {
-      ...window._.pick(attachment, [
-        'contentType',
-        'fileName',
-        'size',
-        'caption',
-        'blurHash',
-      ]),
+      ...attachment,
       data,
     };
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   arrayBufferFromFile(file: Blob): Promise<ArrayBuffer> {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve, rejectPromise) => {
       const FR = new FileReader();
-      FR.onload = (e: WhatIsThis) => {
-        resolve(e.target.result);
+      FR.onload = () => {
+        if (!FR.result || typeof FR.result === 'string') {
+          rejectPromise(new Error('arrayBufferFromFile: No result!'));
+          return;
+        }
+        resolve(FR.result);
       };
-      FR.onerror = reject;
-      FR.onabort = reject;
+      FR.onerror = rejectPromise;
+      FR.onabort = rejectPromise;
       FR.readAsArrayBuffer(file);
     });
-  },
+  }
 
   showFileSizeError({
     limit,
     units,
     u,
   }: Readonly<{
-    limit: WhatIsThis;
-    units: WhatIsThis;
-    u: WhatIsThis;
-  }>) {
+    limit: number;
+    units: Array<string>;
+    u: number;
+  }>): void {
     const toast = new Whisper.FileSizeToast({
       model: { limit, units: units[u] },
     });
     toast.$el.insertAfter(this.$el);
     toast.render();
-  },
+  }
 
-  updateAttachmentsView() {
-    const { model }: { model: ConversationModel } = this;
-    const draftAttachments = model.get('draftAttachments') || [];
+  updateAttachmentsView(): void {
+    const draftAttachments = this.model.get('draftAttachments') || [];
     window.reduxActions.composer.replaceAttachments(
-      model.get('id'),
-      draftAttachments.map(att => this.resolveOnDiskAttachment(att))
+      this.model.get('id'),
+      draftAttachments.map((att: OnDiskAttachmentDraftType) =>
+        this.resolveOnDiskAttachment(att)
+      )
     );
     this.toggleMicrophone();
     if (this.hasFiles()) {
       this.removeLinkPreview();
     }
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   async writeDraftAttachment(
     attachment: InMemoryAttachmentDraftType
   ): Promise<OnDiskAttachmentDraftType> {
-    let toWrite = attachment;
+    let toWrite: OnDiskAttachmentDraftType | undefined;
 
-    if (toWrite.data) {
-      const path = await writeNewDraftData(toWrite.data);
+    if (attachment.pending) {
+      throw new Error('writeDraftAttachment: Cannot write pending attachment');
+    }
+    if (attachment.data) {
+      const path = await writeNewDraftData(attachment.data);
       toWrite = {
-        ...window._.omit(toWrite, ['data']),
+        ...omit(attachment, ['data']),
         path,
+        pending: false,
       };
     }
-    if (toWrite.screenshotData) {
-      const screenshotPath = await writeNewDraftData(toWrite.screenshotData);
+
+    if (attachment.pending) {
+      throw new Error('writeDraftAttachment: Cannot write pending attachment');
+    }
+    if (attachment.screenshotData) {
+      const screenshotPath = await writeNewDraftData(attachment.screenshotData);
       toWrite = {
-        ...window._.omit(toWrite, ['screenshotData']),
+        ...omit(attachment, ['screenshotData']),
         screenshotPath,
+        pending: false,
       };
     }
 
+    if (!toWrite) {
+      throw new Error('writeDraftAttachment: Neither data nor screenshotData!');
+    }
+
     return toWrite;
-  },
+  }
 
   async maybeAddAttachment(file: File): Promise<void> {
     if (!file) {
@@ -1994,17 +2139,15 @@ Whisper.ConversationView = Whisper.View.extend({
       return;
     }
 
-    const { model }: { model: ConversationModel } = this;
-
-    const draftAttachments = model.get('draftAttachments') || [];
+    const draftAttachments = this.model.get('draftAttachments') || [];
     if (draftAttachments.length >= 32) {
       this.showToast(Whisper.MaxAttachmentsToast);
       return;
     }
 
-    const haveNonImage = window._.any(
-      draftAttachments,
-      (attachment: WhatIsThis) => !MIME.isImage(attachment.contentType)
+    const haveNonImage = draftAttachments.some(
+      (attachment: OnDiskAttachmentDraftType) =>
+        !MIME.isImage(attachment.contentType)
     );
     // You can't add another attachment if you already have a non-image staged
     if (haveNonImage) {
@@ -2028,6 +2171,7 @@ Whisper.ConversationView = Whisper.View.extend({
         isHeic(fileType)
       ) {
         const fileName = nodePath.parse(file.name).name;
+        const path = file.name;
         // Add a pending attachment since transcoding may take a while
         this.model.set({
           draftAttachments: [
@@ -2035,7 +2179,7 @@ Whisper.ConversationView = Whisper.View.extend({
             {
               contentType: IMAGE_JPEG,
               fileName,
-              path: file.name,
+              path,
               pending: true,
             },
           ],
@@ -2045,10 +2189,10 @@ Whisper.ConversationView = Whisper.View.extend({
         attachment = await handleImageAttachment(file);
 
         const hasDraftAttachmentPending = (
-          model.get('draftAttachments') || []
+          this.model.get('draftAttachments') || []
         ).some(
           draftAttachment =>
-            draftAttachment.pending && draftAttachment.fileName === fileName
+            draftAttachment.pending && draftAttachment.path === path
         );
 
         // User has canceled the draft so we don't need to continue processing
@@ -2062,10 +2206,12 @@ Whisper.ConversationView = Whisper.View.extend({
       } else {
         const data = await this.arrayBufferFromFile(file);
         attachment = {
-          data,
-          size: data.byteLength,
           contentType: fileType,
+          data,
           fileName: file.name,
+          path: file.name,
+          pending: false,
+          size: data.byteLength,
         };
       }
     } catch (e) {
@@ -2075,10 +2221,12 @@ Whisper.ConversationView = Whisper.View.extend({
       );
       const data = await this.arrayBufferFromFile(file);
       attachment = {
-        data,
-        size: data.byteLength,
         contentType: fileType,
+        data,
         fileName: file.name,
+        path: file.name,
+        pending: false,
+        size: data.byteLength,
       };
     }
 
@@ -2106,9 +2254,9 @@ Whisper.ConversationView = Whisper.View.extend({
 
       this.showToast(Whisper.UnableToLoadToast);
     }
-  },
+  }
 
-  isSizeOkay(attachment: Readonly<AttachmentType>) {
+  isSizeOkay(attachment: Readonly<AttachmentType>): boolean {
     const limitKb = window.Signal.Types.Attachment.getUploadSizeLimitKb(
       attachment.contentType
     );
@@ -2128,7 +2276,7 @@ Whisper.ConversationView = Whisper.View.extend({
     }
 
     return true;
-  },
+  }
 
   async handleVideoAttachment(
     file: Readonly<File>
@@ -2150,21 +2298,26 @@ Whisper.ConversationView = Whisper.View.extend({
       const data = await this.arrayBufferFromFile(file);
 
       return {
+        contentType: stringToMIMEType(file.type),
+        data,
         fileName: file.name,
+        path: file.name,
+        pending: false,
         screenshotContentType,
         screenshotData,
         screenshotSize: screenshotData.byteLength,
-        contentType: stringToMIMEType(file.type),
-        data,
         size: data.byteLength,
       };
     } finally {
       URL.revokeObjectURL(objectUrl);
     }
-  },
+  }
 
-  markAllAsVerifiedDefault(unverified: ReadonlyArray<ConversationModel>) {
-    return Promise.all(
+  // eslint-disable-next-line class-methods-use-this
+  async markAllAsVerifiedDefault(
+    unverified: ReadonlyArray<ConversationModel>
+  ): Promise<void> {
+    await Promise.all(
       unverified.map(contact => {
         if (contact.isUnverified()) {
           return contact.setVerifiedDefault();
@@ -2173,22 +2326,25 @@ Whisper.ConversationView = Whisper.View.extend({
         return null;
       })
     );
-  },
+  }
 
-  markAllAsApproved(untrusted: ReadonlyArray<ConversationModel>) {
-    return Promise.all(untrusted.map(contact => contact.setApproved()));
-  },
+  // eslint-disable-next-line class-methods-use-this
+  async markAllAsApproved(
+    untrusted: ReadonlyArray<ConversationModel>
+  ): Promise<void> {
+    await Promise.all(untrusted.map(contact => contact.setApproved()));
+  }
 
-  toggleMicrophone() {
-    this.compositionApi.current.setShowMic(!this.hasFiles());
-  },
+  toggleMicrophone(): void {
+    this.compositionApi.current?.setShowMic(!this.hasFiles());
+  }
 
-  captureAudio(e?: Event) {
+  captureAudio(e?: Event): void {
     if (e) {
       e.preventDefault();
     }
 
-    if (this.compositionApi.current.isDirty()) {
+    if (this.compositionApi.current?.isDirty()) {
       return;
     }
 
@@ -2204,7 +2360,7 @@ Whisper.ConversationView = Whisper.View.extend({
 
     if (this.captureAudioView) {
       this.captureAudioView.remove();
-      this.captureAudioView = null;
+      this.captureAudioView = undefined;
     }
 
     this.captureAudioView = new Whisper.RecorderView();
@@ -2216,12 +2372,12 @@ Whisper.ConversationView = Whisper.View.extend({
     view.on('closed', this.endCaptureAudio.bind(this));
     view.$el.appendTo(this.$('.capture-audio'));
     view.$('.finish').focus();
-    this.compositionApi.current.setMicActive(true);
+    this.compositionApi.current?.setMicActive(true);
 
     this.disableMessageField();
     this.$('.microphone').hide();
-  },
-  handleAudioConfirm(blob: Blob, lostFocus?: boolean) {
+  }
+  handleAudioConfirm(blob: Blob, lostFocus?: boolean): void {
     window.showConfirmationDialog({
       confirmStyle: 'negative',
       cancelText: window.i18n('discard'),
@@ -2233,8 +2389,8 @@ Whisper.ConversationView = Whisper.View.extend({
         await this.handleAudioCapture(blob);
       },
     });
-  },
-  async handleAudioCapture(blob: Blob) {
+  }
+  async handleAudioCapture(blob: Blob): Promise<void> {
     if (this.hasFiles()) {
       throw new Error('A voice note cannot be sent with other attachments');
     }
@@ -2243,30 +2399,28 @@ Whisper.ConversationView = Whisper.View.extend({
 
     // These aren't persisted to disk; they are meant to be sent immediately
     this.voiceNoteAttachment = {
-      contentType: blob.type,
+      contentType: stringToMIMEType(blob.type),
       data,
       size: data.byteLength,
       flags: Proto.AttachmentPointer.Flags.VOICE_MESSAGE,
     };
 
     // Note: The RecorderView removes itself on send
-    this.captureAudioView = null;
+    this.captureAudioView = undefined;
 
     this.sendMessage();
-  },
-  endCaptureAudio() {
+  }
+  endCaptureAudio(): void {
     this.enableMessageField();
     this.$('.microphone').show();
 
     // Note: The RecorderView removes itself on close
-    this.captureAudioView = null;
+    this.captureAudioView = undefined;
 
-    this.compositionApi.current.setMicActive(false);
-  },
-
-  async onOpened(messageId: string) {
-    const { model }: { model: ConversationModel } = this;
+    this.compositionApi.current?.setMicActive(false);
+  }
 
+  async onOpened(messageId: string): Promise<void> {
     if (messageId) {
       const message = await getMessageById(messageId, {
         Message: Whisper.Message,
@@ -2282,50 +2436,50 @@ Whisper.ConversationView = Whisper.View.extend({
 
     const { retryPlaceholders } = window.Signal.Services;
     if (retryPlaceholders) {
-      await retryPlaceholders.findByConversationAndMarkOpened(model.id);
+      await retryPlaceholders.findByConversationAndMarkOpened(this.model.id);
     }
 
-    this.loadNewestMessages();
-    model.updateLastMessage();
+    this.loadNewestMessages(undefined, undefined);
+    this.model.updateLastMessage();
 
     this.focusMessageField();
 
-    const quotedMessageId = model.get('quotedMessageId');
+    const quotedMessageId = this.model.get('quotedMessageId');
     if (quotedMessageId) {
       this.setQuoteMessage(quotedMessageId);
     }
 
-    model.fetchLatestGroupV2Data();
-    assert(
-      model.throttledMaybeMigrateV1Group !== undefined,
+    this.model.fetchLatestGroupV2Data();
+    strictAssert(
+      this.model.throttledMaybeMigrateV1Group !== undefined,
       'Conversation model should be initialized'
     );
-    model.throttledMaybeMigrateV1Group();
-    assert(
-      model.throttledFetchSMSOnlyUUID !== undefined,
+    this.model.throttledMaybeMigrateV1Group();
+    strictAssert(
+      this.model.throttledFetchSMSOnlyUUID !== undefined,
       'Conversation model should be initialized'
     );
-    model.throttledFetchSMSOnlyUUID();
+    this.model.throttledFetchSMSOnlyUUID();
 
-    const statusPromise = this.model.throttledGetProfiles();
-    // eslint-disable-next-line more/no-then
-    this.statusFetch = statusPromise.then(() =>
-      // eslint-disable-next-line more/no-then
-      model.updateVerified().then(() => {
-        this.statusFetch = null;
-      })
+    strictAssert(
+      this.model.throttledGetProfiles !== undefined,
+      'Conversation model should be initialized'
     );
-  },
+    await this.model.throttledGetProfiles();
 
-  async retrySend(messageId: string) {
+    this.model.updateVerified();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  async retrySend(messageId: string): Promise<void> {
     const message = window.MessageController.getById(messageId);
     if (!message) {
       throw new Error(`retrySend: Message ${messageId} missing!`);
     }
     await message.retrySend();
-  },
+  }
 
-  showForwardMessageModal(messageId: string) {
+  showForwardMessageModal(messageId: string): void {
     const message = window.MessageController.getById(messageId);
     if (!message) {
       throw new Error(`showForwardMessageModal: Message ${messageId} missing!`);
@@ -2352,9 +2506,9 @@ Whisper.ConversationView = Whisper.View.extend({
                 linkPreview
               );
 
-              if (didForwardSuccessfully) {
+              if (didForwardSuccessfully && this.forwardMessageModal) {
                 this.forwardMessageModal.remove();
-                this.forwardMessageModal = null;
+                this.forwardMessageModal = undefined;
               }
             } catch (err) {
               window.log.warn(
@@ -2366,13 +2520,15 @@ Whisper.ConversationView = Whisper.View.extend({
           isSticker: Boolean(message.get('sticker')),
           messageBody: message.getRawText(),
           onClose: () => {
-            this.forwardMessageModal.remove();
-            this.forwardMessageModal = null;
+            if (this.forwardMessageModal) {
+              this.forwardMessageModal.remove();
+              this.forwardMessageModal = undefined;
+            }
             this.resetLinkPreview();
           },
           onEditorStateChange: (
             messageText: string,
-            _: Array<typeof window.Whisper.BodyRangeType>,
+            _: Array<BodyRangeType>,
             caretLocation?: number
           ) => {
             if (!attachments.length) {
@@ -2383,13 +2539,13 @@ Whisper.ConversationView = Whisper.View.extend({
             this.showToast(
               Whisper.MessageBodyTooLongToast,
               {},
-              document.querySelector('.module-ForwardMessageModal')
+              document.querySelector('.module-ForwardMessageModal') || undefined
             ),
         }
       ),
     });
     this.forwardMessageModal.render();
-  },
+  }
 
   async maybeForwardMessage(
     message: MessageModel,
@@ -2545,16 +2701,15 @@ Whisper.ConversationView = Whisper.View.extend({
     this.resetLinkPreview();
 
     return true;
-  },
+  }
 
-  async showAllMedia() {
+  async showAllMedia(): Promise<void> {
     // We fetch more documents than media as they don’t require to be loaded
     // into memory right away. Revisit this once we have infinite scrolling:
     const DEFAULT_MEDIA_FETCH_COUNT = 50;
     const DEFAULT_DOCUMENTS_FETCH_COUNT = 150;
 
-    const { model }: { model: ConversationModel } = this;
-    const conversationId = model.get('id');
+    const conversationId = this.model.get('id');
 
     const getProps = async () => {
       const rawMedia = await window.Signal.Data.getMessagesWithVisualMediaAttachments(
@@ -2587,22 +2742,29 @@ Whisper.ConversationView = Whisper.View.extend({
         }
       }
 
-      const media = window._.flatten(
+      const media: Array<MediaType> = flatten(
         rawMedia.map(message => {
-          const { attachments } = message;
-          return (attachments || [])
-            .filter(
-              (attachment: AttachmentType) =>
-                attachment.thumbnail && !attachment.pending && !attachment.error
-            )
-            .map((attachment: WhatIsThis, index: number) => {
-              const { thumbnail } = attachment;
+          return (message.attachments || []).map(
+            (
+              attachment: AttachmentType,
+              index: number
+            ): MediaType | undefined => {
+              if (
+                !attachment.path ||
+                !attachment.thumbnail ||
+                attachment.pending ||
+                attachment.error
+              ) {
+                return;
+              }
 
+              const { thumbnail } = attachment;
               return {
+                path: attachment.path,
                 objectURL: getAbsoluteAttachmentPath(attachment.path),
                 thumbnailObjectUrl: thumbnail
                   ? getAbsoluteAttachmentPath(thumbnail.path)
-                  : null,
+                  : undefined,
                 contentType: attachment.contentType,
                 index,
                 attachment,
@@ -2621,9 +2783,10 @@ Whisper.ConversationView = Whisper.View.extend({
                   sent_at: message.sent_at,
                 },
               };
-            });
+            }
+          );
         })
-      );
+      ).filter(isNotNil);
 
       // Unlike visual media, only one non-image attachment is supported
       const documents = rawDocuments
@@ -2661,7 +2824,15 @@ Whisper.ConversationView = Whisper.View.extend({
         }
       };
 
-      const onItemClick = async ({ message, attachment, type }: WhatIsThis) => {
+      const onItemClick = async ({
+        message,
+        attachment,
+        type,
+      }: {
+        message: MessageAttributesType;
+        attachment: AttachmentType;
+        type: 'documents' | 'media';
+      }) => {
         switch (type) {
           case 'documents': {
             saveAttachment({ message, attachment });
@@ -2725,35 +2896,30 @@ Whisper.ConversationView = Whisper.View.extend({
     });
 
     this.listenBack(view);
-  },
+  }
 
-  focusMessageField() {
+  focusMessageField(): void {
     if (this.panels && this.panels.length) {
       return;
     }
 
-    const { compositionApi } = this;
+    this.compositionApi.current?.focusInput();
+  }
 
-    if (compositionApi && compositionApi.current) {
-      compositionApi.current.focusInput();
-    }
-  },
+  disableMessageField(): void {
+    this.compositionApi.current?.setDisabled(true);
+  }
 
-  disableMessageField() {
-    this.compositionApi.current.setDisabled(true);
-  },
+  enableMessageField(): void {
+    this.compositionApi.current?.setDisabled(false);
+  }
 
-  enableMessageField() {
-    this.compositionApi.current.setDisabled(false);
-  },
+  resetEmojiResults(): void {
+    this.compositionApi.current?.resetEmojiResults();
+  }
 
-  resetEmojiResults() {
-    this.compositionApi.current.resetEmojiResults(false);
-  },
-
-  showGV1Members() {
-    const { model }: { model: ConversationModel } = this;
-    const { contactCollection } = model;
+  showGV1Members(): void {
+    const { contactCollection } = this.model;
 
     const memberships =
       contactCollection?.map((conversation: ConversationModel) => {
@@ -2777,12 +2943,13 @@ Whisper.ConversationView = Whisper.View.extend({
 
     this.listenBack(view);
     view.render();
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   forceSend({
     contactId,
     messageId,
-  }: Readonly<{ contactId: string; messageId: string }>) {
+  }: Readonly<{ contactId: string; messageId: string }>): void {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const contact = window.ConversationController.get(contactId)!;
     const message = window.MessageController.getById(messageId);
@@ -2819,16 +2986,14 @@ Whisper.ConversationView = Whisper.View.extend({
         message.resend(sendTarget);
       },
     });
-  },
-
-  showSafetyNumber(id: string) {
-    const { model }: { model: ConversationModel } = this;
+  }
 
+  showSafetyNumber(id?: string): void {
     let conversation: undefined | ConversationModel;
 
-    if (!id && isDirectConversation(model.attributes)) {
+    if (!id && isDirectConversation(this.model.attributes)) {
       // eslint-disable-next-line prefer-destructuring
-      conversation = model;
+      conversation = this.model;
     } else {
       conversation = window.ConversationController.get(id);
     }
@@ -2838,9 +3003,12 @@ Whisper.ConversationView = Whisper.View.extend({
       });
       this.listenBack(view);
     }
-  },
+  }
 
-  downloadAttachmentWrapper(messageId: string) {
+  downloadAttachmentWrapper(
+    messageId: string,
+    providedAttachment?: AttachmentType
+  ): void {
     const message = window.MessageController.getById(messageId);
     if (!message) {
       throw new Error(
@@ -2853,13 +3021,16 @@ Whisper.ConversationView = Whisper.View.extend({
       return;
     }
 
-    const attachment = attachments[0];
+    const attachment =
+      providedAttachment && attachments.includes(providedAttachment)
+        ? providedAttachment
+        : attachments[0];
     const { fileName } = attachment;
 
     const isDangerous = window.Signal.Util.isFileDangerous(fileName || '');
 
     this.downloadAttachment({ attachment, timestamp, isDangerous });
-  },
+  }
 
   async downloadAttachment({
     attachment,
@@ -2869,7 +3040,7 @@ Whisper.ConversationView = Whisper.View.extend({
     attachment: AttachmentType;
     timestamp: number;
     isDangerous: boolean;
-  }) {
+  }): Promise<void> {
     if (isDangerous) {
       this.showToast(Whisper.DangerousFileTypeToast);
       return;
@@ -2885,9 +3056,9 @@ Whisper.ConversationView = Whisper.View.extend({
     if (fullPath) {
       this.showToast(Whisper.FileSavedToast, { fullPath });
     }
-  },
+  }
 
-  async displayTapToViewMessage(messageId: string) {
+  async displayTapToViewMessage(messageId: string): Promise<void> {
     window.log.info('displayTapToViewMessage: attempting to display message');
 
     const message = window.MessageController.getById(messageId);
@@ -2932,7 +3103,7 @@ Whisper.ConversationView = Whisper.View.extend({
       }
 
       const { lightboxView } = this;
-      this.lightboxView = null;
+      this.lightboxView = undefined;
 
       this.stopListening(message);
       window.Signal.Backbone.Views.Lightbox.hide();
@@ -2942,8 +3113,8 @@ Whisper.ConversationView = Whisper.View.extend({
     };
     this.listenTo(message, 'expired', closeLightbox);
     this.listenTo(message, 'change', () => {
-      if (this.lightBoxView) {
-        this.lightBoxView.update(getProps());
+      if (this.lightboxView) {
+        this.lightboxView.update(getProps());
       }
     });
 
@@ -2962,7 +3133,7 @@ Whisper.ConversationView = Whisper.View.extend({
               id: message.get('id'),
               conversationId: message.get('conversationId'),
               received_at: message.get('received_at'),
-              received_at_ms: message.get('received_at_ms'),
+              received_at_ms: Number(message.get('received_at_ms')),
               sent_at: message.get('sent_at'),
             },
           },
@@ -2981,9 +3152,9 @@ Whisper.ConversationView = Whisper.View.extend({
     window.Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
 
     window.log.info('displayTapToViewMessage: showed lightbox');
-  },
+  }
 
-  deleteMessage(messageId: string) {
+  deleteMessage(messageId: string): void {
     const message = window.MessageController.getById(messageId);
     if (!message) {
       throw new Error(`deleteMessage: Message ${messageId} missing!`);
@@ -3006,9 +3177,9 @@ Whisper.ConversationView = Whisper.View.extend({
         this.resetPanel();
       },
     });
-  },
+  }
 
-  deleteMessageForEveryone(messageId: string) {
+  deleteMessageForEveryone(messageId: string): void {
     const message = window.MessageController.getById(messageId);
     if (!message) {
       throw new Error(
@@ -3037,16 +3208,18 @@ Whisper.ConversationView = Whisper.View.extend({
         this.resetPanel();
       },
     });
-  },
+  }
 
-  showStickerPackPreview(packId: string, packKey: string) {
+  showStickerPackPreview(packId: string, packKey: string): void {
     Stickers.downloadEphemeralPack(packId, packKey);
 
     const props = {
       packId,
       onClose: async () => {
-        this.stickerPreviewModalView.remove();
-        this.stickerPreviewModalView = null;
+        if (this.stickerPreviewModalView) {
+          this.stickerPreviewModalView.remove();
+          this.stickerPreviewModalView = undefined;
+        }
         await Stickers.removeEphemeralPack(packId);
       },
     };
@@ -3058,12 +3231,12 @@ Whisper.ConversationView = Whisper.View.extend({
         props
       ),
     });
-  },
+  }
 
   showLightboxForMedia(
     selectedMediaItem: MediaItemType,
     media: Array<MediaItemType> = []
-  ) {
+  ): void {
     const onSave = async ({
       attachment,
       message,
@@ -3091,7 +3264,7 @@ Whisper.ConversationView = Whisper.View.extend({
         mediaItem.attachment.path === selectedMediaItem.attachment.path
     );
 
-    this.lightboxGalleryView = new Whisper.ReactWrapperView({
+    this.lightboxView = new Whisper.ReactWrapperView({
       className: 'lightbox-wrapper',
       Component: window.Signal.Components.Lightbox,
       props: {
@@ -3104,8 +3277,8 @@ Whisper.ConversationView = Whisper.View.extend({
       onClose: () => window.Signal.Backbone.Views.Lightbox.hide(),
     });
 
-    window.Signal.Backbone.Views.Lightbox.show(this.lightboxGalleryView.el);
-  },
+    window.Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
+  }
 
   showLightbox({
     attachment,
@@ -3114,7 +3287,7 @@ Whisper.ConversationView = Whisper.View.extend({
     attachment: AttachmentType;
     messageId: string;
     showSingle?: boolean;
-  }) {
+  }): void {
     const message = window.MessageController.getById(messageId);
     if (!message) {
       throw new Error(`showLightbox: Message ${messageId} missing!`);
@@ -3132,7 +3305,7 @@ Whisper.ConversationView = Whisper.View.extend({
       !window.Signal.Util.GoogleChrome.isImageTypeSupported(contentType) &&
       !window.Signal.Util.GoogleChrome.isVideoTypeSupported(contentType)
     ) {
-      this.downloadAttachment({ attachment, message });
+      this.downloadAttachmentWrapper(messageId, attachment);
       return;
     }
 
@@ -3149,7 +3322,7 @@ Whisper.ConversationView = Whisper.View.extend({
         loop,
         index,
         message: {
-          attachments: message.get('attachments'),
+          attachments: message.get('attachments') || [],
           id: message.get('id'),
           conversationId:
             window.ConversationController.get(
@@ -3159,7 +3332,7 @@ Whisper.ConversationView = Whisper.View.extend({
               })
             )?.id || message.get('conversationId'),
           received_at: message.get('received_at'),
-          received_at_ms: message.get('received_at_ms'),
+          received_at_ms: Number(message.get('received_at_ms')),
           sent_at: message.get('sent_at'),
         },
         attachment: item,
@@ -3172,25 +3345,23 @@ Whisper.ConversationView = Whisper.View.extend({
       media.find(item => attachment.path === item.path) || media[0];
 
     this.showLightboxForMedia(selectedMedia, media);
-  },
-
-  showContactModal(contactId: string) {
-    const { model }: { model: ConversationModel } = this;
+  }
 
+  showContactModal(contactId: string): void {
     if (this.contactModalView) {
       this.contactModalView.remove();
-      this.contactModalView = null;
+      this.contactModalView = undefined;
     }
 
-    this.previousFocus = document.activeElement;
+    this.previousFocus = document.activeElement as HTMLElement;
 
     const hideContactModal = () => {
       if (this.contactModalView) {
         this.contactModalView.remove();
-        this.contactModalView = null;
+        this.contactModalView = undefined;
         if (this.previousFocus && this.previousFocus.focus) {
           this.previousFocus.focus();
-          this.previousFocus = null;
+          this.previousFocus = undefined;
         }
       }
     };
@@ -3198,7 +3369,7 @@ Whisper.ConversationView = Whisper.View.extend({
     this.contactModalView = new Whisper.ReactWrapperView({
       JSX: window.Signal.State.Roots.createContactModal(window.reduxStore, {
         contactId,
-        currentConversationId: model.id,
+        currentConversationId: this.model.id,
         onClose: hideContactModal,
         openConversation: (conversationId: string) => {
           hideContactModal();
@@ -3206,7 +3377,7 @@ Whisper.ConversationView = Whisper.View.extend({
         },
         removeMember: (conversationId: string) => {
           hideContactModal();
-          model.removeFromGroupV2(conversationId);
+          this.model.removeFromGroupV2(conversationId);
         },
         showSafetyNumber: (conversationId: string) => {
           hideContactModal();
@@ -3215,7 +3386,7 @@ Whisper.ConversationView = Whisper.View.extend({
         toggleAdmin: (conversationId: string) => {
           hideContactModal();
 
-          const isAdmin = model.isAdmin(conversationId);
+          const isAdmin = this.model.isAdmin(conversationId);
           const conversationModel = window.ConversationController.get(
             conversationId
           );
@@ -3239,7 +3410,7 @@ Whisper.ConversationView = Whisper.View.extend({
             okText: isAdmin
               ? window.i18n('ContactModal--rm-admin')
               : window.i18n('ContactModal--make-admin'),
-            resolve: () => model.toggleAdmin(conversationId),
+            resolve: () => this.model.toggleAdmin(conversationId),
           });
         },
         updateSharedGroups: () => {
@@ -3252,18 +3423,16 @@ Whisper.ConversationView = Whisper.View.extend({
     });
 
     this.contactModalView.render();
-  },
-
-  showGroupLinkManagement() {
-    const { model }: { model: ConversationModel } = this;
+  }
 
+  showGroupLinkManagement(): void {
     const view = new Whisper.ReactWrapperView({
       className: 'panel',
       JSX: window.Signal.State.Roots.createGroupLinkManagement(
         window.reduxStore,
         {
           changeHasGroupLink: this.changeHasGroupLink.bind(this),
-          conversationId: model.id,
+          conversationId: this.model.id,
           copyGroupLink: this.copyGroupLink.bind(this),
           generateNewGroupLink: this.generateNewGroupLink.bind(this),
           setAccessControlAddFromInviteLinkSetting: this.setAccessControlAddFromInviteLinkSetting.bind(
@@ -3276,17 +3445,15 @@ Whisper.ConversationView = Whisper.View.extend({
 
     this.listenBack(view);
     view.render();
-  },
-
-  showGroupV2Permissions() {
-    const { model }: { model: ConversationModel } = this;
+  }
 
+  showGroupV2Permissions(): void {
     const view = new Whisper.ReactWrapperView({
       className: 'panel',
       JSX: window.Signal.State.Roots.createGroupV2Permissions(
         window.reduxStore,
         {
-          conversationId: model.id,
+          conversationId: this.model.id,
           setAccessControlAttributesSetting: this.setAccessControlAttributesSetting.bind(
             this
           ),
@@ -3301,21 +3468,19 @@ Whisper.ConversationView = Whisper.View.extend({
 
     this.listenBack(view);
     view.render();
-  },
-
-  showPendingInvites() {
-    const { model }: { model: ConversationModel } = this;
+  }
 
+  showPendingInvites(): void {
     const view = new Whisper.ReactWrapperView({
       className: 'panel',
       JSX: window.Signal.State.Roots.createPendingInvites(window.reduxStore, {
-        conversationId: model.id,
+        conversationId: this.model.id,
         ourConversationId: window.ConversationController.getOurConversationId(),
         approvePendingMembership: (conversationId: string) => {
-          model.approvePendingMembershipFromGroupV2(conversationId);
+          this.model.approvePendingMembershipFromGroupV2(conversationId);
         },
         revokePendingMemberships: conversationIds => {
-          model.revokePendingMembershipsFromGroupV2(conversationIds);
+          this.model.revokePendingMembershipsFromGroupV2(conversationIds);
         },
       }),
     });
@@ -3323,19 +3488,17 @@ Whisper.ConversationView = Whisper.View.extend({
 
     this.listenBack(view);
     view.render();
-  },
-
-  showConversationNotificationsSettings() {
-    const { model }: { model: ConversationModel } = this;
+  }
 
+  showConversationNotificationsSettings(): void {
     const view = new Whisper.ReactWrapperView({
       className: 'panel',
       JSX: window.Signal.State.Roots.createConversationNotificationsSettings(
         window.reduxStore,
         {
-          conversationId: model.id,
-          setDontNotifyForMentionsIfMuted: model.setDontNotifyForMentionsIfMuted.bind(
-            model
+          conversationId: this.model.id,
+          setDontNotifyForMentionsIfMuted: this.model.setDontNotifyForMentionsIfMuted.bind(
+            this.model
           ),
           setMuteExpiration: this.setMuteExpiration.bind(this),
         }
@@ -3345,15 +3508,13 @@ Whisper.ConversationView = Whisper.View.extend({
 
     this.listenBack(view);
     view.render();
-  },
-
-  showChatColorEditor() {
-    const { model }: { model: ConversationModel } = this;
+  }
 
+  showChatColorEditor(): void {
     const view = new Whisper.ReactWrapperView({
       className: 'panel',
       JSX: window.Signal.State.Roots.createChatColorPicker(window.reduxStore, {
-        conversationId: model.get('id'),
+        conversationId: this.model.get('id'),
       }),
     });
 
@@ -3361,14 +3522,14 @@ Whisper.ConversationView = Whisper.View.extend({
 
     this.listenBack(view);
     view.render();
-  },
+  }
 
-  showConversationDetails() {
+  showConversationDetails(): void {
     // Run a getProfiles in case member's capabilities have changed
     // Redux should cover us on the return here so no need to await this.
-    this.model.throttledGetProfiles();
-
-    const { model }: { model: ConversationModel } = this;
+    if (this.model.throttledGetProfiles) {
+      this.model.throttledGetProfiles();
+    }
 
     const messageRequestEnum = Proto.SyncMessage.MessageRequestResponse.Type;
 
@@ -3378,21 +3539,21 @@ Whisper.ConversationView = Whisper.View.extend({
     const onLeave = () => {
       this.longRunningTaskWrapper({
         name: 'onLeave',
-        task: () => model.leaveGroupV2(),
+        task: () => this.model.leaveGroupV2(),
       });
     };
 
     const onBlock = () => {
       this.syncMessageRequestResponse(
         'onBlock',
-        model,
+        this.model,
         messageRequestEnum.BLOCK
       );
     };
 
     const props = {
-      addMembers: model.addMembersV2.bind(model),
-      conversationId: model.get('id'),
+      addMembers: this.model.addMembersV2.bind(this.model),
+      conversationId: this.model.get('id'),
       loadRecentMediaItems: this.loadRecentMediaItems.bind(this),
       setDisappearingMessages: this.setDisappearingMessages.bind(this),
       showAllMedia: this.showAllMedia.bind(this),
@@ -3405,7 +3566,9 @@ Whisper.ConversationView = Whisper.View.extend({
       ),
       showPendingInvites: this.showPendingInvites.bind(this),
       showLightboxForMedia: this.showLightboxForMedia.bind(this),
-      updateGroupAttributes: model.updateGroupAttributesV2.bind(model),
+      updateGroupAttributes: this.model.updateGroupAttributesV2.bind(
+        this.model
+      ),
       onLeave,
       onBlock,
     };
@@ -3421,9 +3584,9 @@ Whisper.ConversationView = Whisper.View.extend({
 
     this.listenBack(view);
     view.render();
-  },
+  }
 
-  showMessageDetail(messageId: string) {
+  showMessageDetail(messageId: string): void {
     const message = window.MessageController.getById(messageId);
     if (!message) {
       throw new Error(`showMessageDetail: Message ${messageId} missing!`);
@@ -3461,9 +3624,9 @@ Whisper.ConversationView = Whisper.View.extend({
 
     this.listenBack(view);
     view.render();
-  },
+  }
 
-  showStickerManager() {
+  showStickerManager(): void {
     const view = new Whisper.ReactWrapperView({
       className: ['sticker-manager-wrapper', 'panel'].join(' '),
       JSX: window.Signal.State.Roots.createStickerManager(window.reduxStore),
@@ -3474,7 +3637,7 @@ Whisper.ConversationView = Whisper.View.extend({
 
     this.listenBack(view);
     view.render();
-  },
+  }
 
   showContactDetail({
     contact,
@@ -3482,7 +3645,7 @@ Whisper.ConversationView = Whisper.View.extend({
   }: {
     contact: EmbeddedContactType;
     signalAccount?: string;
-  }) {
+  }): void {
     const view = new Whisper.ReactWrapperView({
       Component: window.Signal.Components.ContactDetail,
       className: 'contact-detail-pane panel',
@@ -3501,17 +3664,25 @@ Whisper.ConversationView = Whisper.View.extend({
     });
 
     this.listenBack(view);
-  },
+  }
 
-  async openConversation(conversationId: string) {
-    window.Whisper.events.trigger('showConversation', conversationId);
-  },
+  // eslint-disable-next-line class-methods-use-this
+  async openConversation(
+    conversationId: string,
+    messageId?: string
+  ): Promise<void> {
+    window.Whisper.events.trigger(
+      'showConversation',
+      conversationId,
+      messageId
+    );
+  }
 
-  listenBack(view: WhatIsThis) {
+  listenBack(view: AnyViewClass): void {
     this.panels = this.panels || [];
 
     if (this.panels.length === 0) {
-      this.previousFocus = document.activeElement;
+      this.previousFocus = document.activeElement as HTMLElement;
     }
 
     this.panels.unshift(view);
@@ -3526,8 +3697,8 @@ Whisper.ConversationView = Whisper.View.extend({
     window.reduxActions.conversations.setSelectedConversationHeaderTitle(
       view.headerTitle
     );
-  },
-  resetPanel() {
+  }
+  resetPanel(): void {
     if (!this.panels || !this.panels.length) {
       return;
     }
@@ -3540,21 +3711,23 @@ Whisper.ConversationView = Whisper.View.extend({
       this.previousFocus.focus
     ) {
       this.previousFocus.focus();
-      this.previousFocus = null;
+      this.previousFocus = undefined;
     }
 
     if (this.panels.length > 0) {
       this.panels[0].$el.fadeIn(250);
     }
 
-    view.$el.addClass('panel--remove').one('transitionend', () => {
-      view.remove();
+    if (view) {
+      view.$el.addClass('panel--remove').one('transitionend', () => {
+        view.remove();
 
-      if (this.panels.length === 0) {
-        // Make sure poppers are positioned properly
-        window.dispatchEvent(new Event('resize'));
-      }
-    });
+        if (this.panels.length === 0) {
+          // Make sure poppers are positioned properly
+          window.dispatchEvent(new Event('resize'));
+        }
+      });
+    }
 
     window.reduxActions.conversations.setSelectedConversationPanelDepth(
       this.panels.length
@@ -3562,13 +3735,13 @@ Whisper.ConversationView = Whisper.View.extend({
     window.reduxActions.conversations.setSelectedConversationHeaderTitle(
       this.panels[0]?.headerTitle
     );
-  },
+  }
 
-  endSession() {
+  endSession(): void {
     const { model }: { model: ConversationModel } = this;
 
     model.endSession();
-  },
+  }
 
   async loadRecentMediaItems(limit: number): Promise<void> {
     const { model }: { model: ConversationModel } = this;
@@ -3618,9 +3791,9 @@ Whisper.ConversationView = Whisper.View.extend({
       model.id,
       loadedRecentMediaItems
     );
-  },
+  }
 
-  async setDisappearingMessages(seconds: number) {
+  async setDisappearingMessages(seconds: number): Promise<void> {
     const { model }: { model: ConversationModel } = this;
 
     const valueToSet = seconds > 0 ? seconds : undefined;
@@ -3629,23 +3802,23 @@ Whisper.ConversationView = Whisper.View.extend({
       name: 'updateExpirationTimer',
       task: async () => model.updateExpirationTimer(valueToSet),
     });
-  },
+  }
 
-  async changeHasGroupLink(value: boolean) {
+  async changeHasGroupLink(value: boolean): Promise<void> {
     const { model }: { model: ConversationModel } = this;
 
     await this.longRunningTaskWrapper({
       name: 'toggleGroupLink',
       task: async () => model.toggleGroupLink(value),
     });
-  },
+  }
 
-  async copyGroupLink(groupLink: string) {
+  async copyGroupLink(groupLink: string): Promise<void> {
     await navigator.clipboard.writeText(groupLink);
     this.showToast(Whisper.GroupLinkCopiedToast);
-  },
+  }
 
-  async generateNewGroupLink() {
+  async generateNewGroupLink(): Promise<void> {
     const { model }: { model: ConversationModel } = this;
 
     window.showConfirmationDialog({
@@ -3659,7 +3832,7 @@ Whisper.ConversationView = Whisper.View.extend({
         });
       },
     });
-  },
+  }
 
   async setAccessControlAddFromInviteLinkSetting(
     value: boolean
@@ -3670,7 +3843,7 @@ Whisper.ConversationView = Whisper.View.extend({
       name: 'updateAccessControlAddFromInviteLink',
       task: async () => model.updateAccessControlAddFromInviteLink(value),
     });
-  },
+  }
 
   async setAccessControlAttributesSetting(value: number): Promise<void> {
     const { model }: { model: ConversationModel } = this;
@@ -3679,7 +3852,7 @@ Whisper.ConversationView = Whisper.View.extend({
       name: 'updateAccessControlAttributes',
       task: async () => model.updateAccessControlAttributes(value),
     });
-  },
+  }
 
   async setAccessControlMembersSetting(value: number): Promise<void> {
     const { model }: { model: ConversationModel } = this;
@@ -3688,7 +3861,7 @@ Whisper.ConversationView = Whisper.View.extend({
       name: 'updateAccessControlMembers',
       task: async () => model.updateAccessControlMembers(value),
     });
-  },
+  }
 
   async setAnnouncementsOnly(value: boolean): Promise<void> {
     const { model }: { model: ConversationModel } = this;
@@ -3697,9 +3870,9 @@ Whisper.ConversationView = Whisper.View.extend({
       name: 'updateAnnouncementsOnly',
       task: async () => model.updateAnnouncementsOnly(value),
     });
-  },
+  }
 
-  async destroyMessages() {
+  async destroyMessages(): Promise<void> {
     const { model }: { model: ConversationModel } = this;
 
     window.showConfirmationDialog({
@@ -3720,13 +3893,13 @@ Whisper.ConversationView = Whisper.View.extend({
         window.log.info('destroyMessages: User canceled delete');
       },
     });
-  },
+  }
 
-  async isCallSafe() {
+  async isCallSafe(): Promise<boolean> {
     const contacts = await this.getUntrustedContacts();
     if (contacts && contacts.length) {
       const callAnyway = await this.showSendAnywayDialog(
-        contacts,
+        contacts.models,
         window.i18n('callAnyway')
       );
       if (!callAnyway) {
@@ -3738,12 +3911,13 @@ Whisper.ConversationView = Whisper.View.extend({
     }
 
     return true;
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   showSendAnywayDialog(
     contacts: Array<ConversationModel>,
     confirmText?: string
-  ) {
+  ): Promise<boolean> {
     return new Promise(resolve => {
       showSafetyNumberChangeDialog({
         confirmText,
@@ -3756,12 +3930,12 @@ Whisper.ConversationView = Whisper.View.extend({
         },
       });
     });
-  },
+  }
 
   async sendReactionMessage(
     messageId: string,
     reaction: { emoji: string; remove: boolean }
-  ) {
+  ): Promise<void> {
     const messageModel = messageId
       ? await getMessageById(messageId, {
           Message: Whisper.Message,
@@ -3770,28 +3944,38 @@ Whisper.ConversationView = Whisper.View.extend({
 
     try {
       if (!messageModel) {
-        throw new Error('Message not found');
+        throw new Error('sendReactionMessage: Message not found');
+      }
+      const targetAuthorUuid = messageModel.getSourceUuid();
+      if (!targetAuthorUuid) {
+        throw new Error(
+          `sendReactionMessage: Message ${messageModel.idForLogging()} had no source uuid! Cannot send reaction.`
+        );
       }
 
       await this.model.sendReactionMessage(reaction, {
         messageId,
-        targetAuthorUuid: messageModel.getSourceUuid(),
+        targetAuthorUuid,
         targetTimestamp: messageModel.get('sent_at'),
       });
     } catch (error) {
       window.log.error('Error sending reaction', error, messageId, reaction);
       this.showToast(Whisper.ReactionFailedToast);
     }
-  },
+  }
 
-  async sendStickerMessage(options: { packId: string; stickerId: number }) {
+  async sendStickerMessage(options: {
+    packId: string;
+    stickerId: number;
+    force?: boolean;
+  }): Promise<void> {
     const { model }: { model: ConversationModel } = this;
 
     try {
       const contacts = await this.getUntrustedContacts(options);
 
       if (contacts && contacts.length) {
-        const sendAnyway = await this.showSendAnywayDialog(contacts);
+        const sendAnyway = await this.showSendAnywayDialog(contacts.models);
         if (sendAnyway) {
           this.sendStickerMessage({ ...options, force: true });
         }
@@ -3811,9 +3995,11 @@ Whisper.ConversationView = Whisper.View.extend({
         error && error.stack ? error.stack : error
       );
     }
-  },
+  }
 
-  async getUntrustedContacts(options: { force?: boolean } = {}) {
+  async getUntrustedContacts(
+    options: { force?: boolean } = {}
+  ): Promise<null | ConversationModelCollectionType> {
     const { model }: { model: ConversationModel } = this;
 
     // This will go to the trust store for the latest identity key information,
@@ -3823,7 +4009,7 @@ Whisper.ConversationView = Whisper.View.extend({
 
     if (options.force) {
       if (unverifiedContacts.length) {
-        await this.markAllAsVerifiedDefault(unverifiedContacts);
+        await this.markAllAsVerifiedDefault(unverifiedContacts.models);
         // We only want force to break us through one layer of checks
         // eslint-disable-next-line no-param-reassign
         options.force = false;
@@ -3836,16 +4022,16 @@ Whisper.ConversationView = Whisper.View.extend({
 
     if (options.force) {
       if (untrustedContacts.length) {
-        await this.markAllAsApproved(untrustedContacts);
+        await this.markAllAsApproved(untrustedContacts.models);
       }
     } else if (untrustedContacts.length) {
       return untrustedContacts;
     }
 
     return null;
-  },
+  }
 
-  async setQuoteMessage(messageId: null | string) {
+  async setQuoteMessage(messageId: null | string): Promise<void> {
     const { model }: { model: ConversationModel } = this;
 
     const message: MessageModel | undefined = messageId
@@ -3869,8 +4055,8 @@ Whisper.ConversationView = Whisper.View.extend({
       return;
     }
 
-    this.quote = null;
-    this.quotedMessage = null;
+    this.quote = undefined;
+    this.quotedMessage = undefined;
 
     const existing = model.get('quotedMessageId');
     if (existing !== messageId) {
@@ -3898,9 +4084,9 @@ Whisper.ConversationView = Whisper.View.extend({
     }
 
     this.renderQuotedMessage();
-  },
+  }
 
-  renderQuotedMessage() {
+  renderQuotedMessage(): void {
     const { model }: { model: ConversationModel } = this;
 
     if (!this.quotedMessage) {
@@ -3912,7 +4098,7 @@ Whisper.ConversationView = Whisper.View.extend({
       conversationId: model.id,
       quote: this.quote,
     });
-  },
+  }
 
   showInvalidMessageToast(messageText?: string): boolean {
     const { model }: { model: ConversationModel } = this;
@@ -3925,16 +4111,22 @@ Whisper.ConversationView = Whisper.View.extend({
     if (!model.isValid()) {
       ToastView = Whisper.InvalidConversationToast;
     }
+
+    const e164 = this.model.get('e164');
+    const uuid = this.model.get('uuid');
     if (
       isDirectConversation(this.model.attributes) &&
-      (window.storage.blocked.isBlocked(this.model.get('e164')) ||
-        window.storage.blocked.isUuidBlocked(this.model.get('uuid')))
+      ((e164 && window.storage.blocked.isBlocked(e164)) ||
+        (uuid && window.storage.blocked.isUuidBlocked(uuid)))
     ) {
       ToastView = Whisper.BlockedToast;
     }
+
+    const groupId = this.model.get('groupId');
     if (
       !isDirectConversation(this.model.attributes) &&
-      window.storage.blocked.isGroupBlocked(this.model.get('groupId'))
+      groupId &&
+      window.storage.blocked.isGroupBlocked(groupId)
     ) {
       ToastView = Whisper.BlockedGroupToast;
     }
@@ -3952,13 +4144,13 @@ Whisper.ConversationView = Whisper.View.extend({
     }
 
     return false;
-  },
+  }
 
   async sendMessage(
     message = '',
-    mentions = [],
+    mentions: BodyRangesType = [],
     options: { timestamp?: number; force?: boolean } = {}
-  ) {
+  ): Promise<void> {
     const { model }: { model: ConversationModel } = this;
     const timestamp = options.timestamp || Date.now();
 
@@ -3969,7 +4161,7 @@ Whisper.ConversationView = Whisper.View.extend({
       this.disableMessageField();
 
       if (contacts && contacts.length) {
-        const sendAnyway = await this.showSendAnywayDialog(contacts);
+        const sendAnyway = await this.showSendAnywayDialog(contacts.models);
         if (sendAnyway) {
           this.sendMessage(message, mentions, { force: true, timestamp });
           return;
@@ -4021,7 +4213,7 @@ Whisper.ConversationView = Whisper.View.extend({
           }
         );
 
-        this.compositionApi.current.reset();
+        this.compositionApi.current?.reset();
         model.setMarkedUnread(false);
         this.setQuoteMessage(null);
         this.resetLinkPreview();
@@ -4036,22 +4228,22 @@ Whisper.ConversationView = Whisper.View.extend({
     } finally {
       this.enableMessageField();
     }
-  },
+  }
 
   onEditorStateChange(
     messageText: string,
-    bodyRanges: Array<typeof window.Whisper.BodyRangeType>,
+    bodyRanges: Array<BodyRangeType>,
     caretLocation?: number
-  ) {
+  ): void {
     this.maybeBumpTyping(messageText);
     this.debouncedSaveDraft(messageText, bodyRanges);
     this.debouncedMaybeGrabLinkPreview(messageText, caretLocation);
-  },
+  }
 
   async saveDraft(
     messageText: string,
-    bodyRanges: Array<typeof window.Whisper.BodyRangeType>
-  ) {
+    bodyRanges: Array<BodyRangeType>
+  ): Promise<void> {
     const { model }: { model: ConversationModel } = this;
 
     const trimmed =
@@ -4076,9 +4268,9 @@ Whisper.ConversationView = Whisper.View.extend({
       });
       await this.saveModel();
     }
-  },
+  }
 
-  maybeGrabLinkPreview(message: string, caretLocation?: number) {
+  maybeGrabLinkPreview(message: string, caretLocation?: number): void {
     // Don't generate link previews if user has turned them off
     if (!window.Events.getLinkPreviewSetting()) {
       return;
@@ -4106,11 +4298,11 @@ Whisper.ConversationView = Whisper.View.extend({
 
     const links = LinkPreview.findLinks(message, caretLocation);
     const { currentlyMatchedLink } = this;
-    if (links.includes(currentlyMatchedLink)) {
+    if (currentlyMatchedLink && links.includes(currentlyMatchedLink)) {
       return;
     }
 
-    this.currentlyMatchedLink = null;
+    this.currentlyMatchedLink = undefined;
     this.excludedPreviewUrls = this.excludedPreviewUrls || [];
 
     const link = links.find(
@@ -4124,28 +4316,29 @@ Whisper.ConversationView = Whisper.View.extend({
     }
 
     this.addLinkPreview(link);
-  },
+  }
 
-  resetLinkPreview() {
+  resetLinkPreview(): void {
     this.disableLinkPreviews = false;
     this.excludedPreviewUrls = [];
     this.removeLinkPreview();
-  },
+  }
 
-  removeLinkPreview() {
-    (this.preview || []).forEach((item: WhatIsThis) => {
+  removeLinkPreview(): void {
+    (this.preview || []).forEach((item: LinkPreviewResult) => {
       if (item.url) {
         URL.revokeObjectURL(item.url);
       }
     });
-    this.preview = null;
-    this.currentlyMatchedLink = null;
+    this.preview = undefined;
+    this.currentlyMatchedLink = undefined;
     this.linkPreviewAbortController?.abort();
-    this.linkPreviewAbortController = null;
+    this.linkPreviewAbortController = undefined;
 
     window.reduxActions.linkPreviews.removeLinkPreview();
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   async getStickerPackPreview(
     url: string,
     abortSignal: Readonly<AbortSignal>
@@ -4212,16 +4405,16 @@ Whisper.ConversationView = Whisper.View.extend({
       }
 
       return {
-        title,
-        url,
+        date: null,
+        description: null,
         image: {
           ...sticker,
           data,
           size: data.byteLength,
           contentType: IMAGE_WEBP,
         },
-        description: null,
-        date: null,
+        title,
+        url,
       };
     } catch (error) {
       window.log.error(
@@ -4234,8 +4427,9 @@ Whisper.ConversationView = Whisper.View.extend({
         await Stickers.removeEphemeralPack(id);
       }
     }
-  },
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   async getGroupPreview(
     url: string,
     abortSignal: Readonly<AbortSignal>
@@ -4313,13 +4507,13 @@ Whisper.ConversationView = Whisper.View.extend({
     }
 
     return {
-      title,
-      description,
-      url,
-      image,
       date: null,
+      description,
+      image,
+      title,
+      url,
     };
-  },
+  }
 
   async getPreview(
     url: string,
@@ -4406,15 +4600,15 @@ Whisper.ConversationView = Whisper.View.extend({
     }
 
     return {
+      date: date || null,
+      description: description || null,
+      image,
       title,
       url,
-      image,
-      description,
-      date,
     };
-  },
+  }
 
-  async addLinkPreview(url: string) {
+  async addLinkPreview(url: string): Promise<void> {
     if (this.currentlyMatchedLink === url) {
       window.log.warn(
         'addLinkPreview should not be called with the same URL like this'
@@ -4422,13 +4616,13 @@ Whisper.ConversationView = Whisper.View.extend({
       return;
     }
 
-    (this.preview || []).forEach((item: WhatIsThis) => {
+    (this.preview || []).forEach((item: LinkPreviewResult) => {
       if (item.url) {
         URL.revokeObjectURL(item.url);
       }
     });
     window.reduxActions.linkPreviews.removeLinkPreview();
-    this.preview = null;
+    this.preview = undefined;
 
     // Cancel other in-flight link preview requests.
     if (this.linkPreviewAbortController) {
@@ -4473,7 +4667,7 @@ Whisper.ConversationView = Whisper.View.extend({
         return;
       }
 
-      if (result.image) {
+      if (result.image && result.image.data) {
         const blob = new Blob([result.image.data], {
           type: result.image.contentType,
         });
@@ -4484,7 +4678,13 @@ Whisper.ConversationView = Whisper.View.extend({
         return;
       }
 
-      window.reduxActions.linkPreviews.addLinkPreview(result);
+      window.reduxActions.linkPreviews.addLinkPreview({
+        ...result,
+        description: dropNull(result.description),
+        date: dropNull(result.date),
+        domain: LinkPreview.getDomain(result.url),
+        isStickerPack: LinkPreview.isStickerPack(result.url),
+      });
       this.preview = [result];
       this.renderLinkPreview();
     } catch (error) {
@@ -4497,9 +4697,9 @@ Whisper.ConversationView = Whisper.View.extend({
     } finally {
       clearTimeout(timeout);
     }
-  },
+  }
 
-  renderLinkPreview() {
+  renderLinkPreview(): void {
     if (this.forwardMessageModal) {
       return;
     }
@@ -4507,9 +4707,9 @@ Whisper.ConversationView = Whisper.View.extend({
       Boolean(this.currentlyMatchedLink),
       this.getLinkPreviewWithDomain()
     );
-  },
+  }
 
-  getLinkPreviewForSend(message: string) {
+  getLinkPreviewForSend(message: string): Array<LinkPreviewType> {
     // Don't generate link previews if user has turned them off
     if (!window.storage.get('linkPreviews', false)) {
       return [];
@@ -4527,19 +4727,29 @@ Whisper.ConversationView = Whisper.View.extend({
         //   the message. This can happen if you have a link preview, then quickly delete
         //   the link and send the message.
         .filter(({ url }: Readonly<{ url: string }>) => urlsInMessage.has(url))
-        .map((item: WhatIsThis) => {
+        .map((item: LinkPreviewResult) => {
           if (item.image) {
             // We eliminate the ObjectURL here, unneeded for send or save
             return {
               ...item,
-              image: window._.omit(item.image, 'url'),
+              image: omit(item.image, 'url'),
+              description: dropNull(item.description),
+              date: dropNull(item.date),
+              domain: LinkPreview.getDomain(item.url),
+              isStickerPack: LinkPreview.isStickerPack(item.url),
             };
           }
 
-          return item;
+          return {
+            ...item,
+            description: dropNull(item.description),
+            date: dropNull(item.date),
+            domain: LinkPreview.getDomain(item.url),
+            isStickerPack: LinkPreview.isStickerPack(item.url),
+          };
         })
     );
-  },
+  }
 
   getLinkPreviewWithDomain(): LinkPreviewWithDomain | undefined {
     if (!this.preview || !this.preview.length) {
@@ -4551,13 +4761,15 @@ Whisper.ConversationView = Whisper.View.extend({
       ...preview,
       domain: LinkPreview.getDomain(preview.url),
     };
-  },
+  }
 
   // Called whenever the user changes the message composition field. But only
   //   fires if there's content in the message field after the change.
-  maybeBumpTyping(messageText: string) {
-    if (messageText.length) {
+  maybeBumpTyping(messageText: string): void {
+    if (messageText.length && this.model.throttledBumpTyping) {
       this.model.throttledBumpTyping();
     }
-  },
-});
+  }
+}
+
+window.Whisper.ConversationView = ConversationView;
diff --git a/ts/window.d.ts b/ts/window.d.ts
index e76b8a91a3c7..d46f13b2e99f 100644
--- a/ts/window.d.ts
+++ b/ts/window.d.ts
@@ -120,6 +120,7 @@ import { StateType } from './state/reducer';
 import { SystemTraySetting } from './types/SystemTraySetting';
 import { CI } from './CI';
 import { IPCEventsType } from './util/createIPCEvents';
+import { ConversationView } from './views/conversation_view';
 
 export { Long } from 'long';
 
@@ -576,8 +577,33 @@ export type LoggerType = {
 
 export type LogFunctionType = (...args: Array<unknown>) => void;
 
+export class AnyViewClass extends window.Backbone.View<any> {
+  public headerTitle?: string;
+  static show(view: typeof AnyViewClass, element: Element): void;
+
+  constructor(options?: any);
+}
+
+export class BasicReactWrapperViewClass extends AnyViewClass {
+  public update(options: any): void;
+}
+
 export type WhisperType = {
+  Conversation: typeof ConversationModel;
+  ConversationCollection: typeof ConversationModelCollectionType;
+  Message: typeof MessageModel;
+  MessageCollection: typeof MessageModelCollectionType;
+
+  GroupMemberConversation: WhatIsThis;
+  KeyChangeListener: WhatIsThis;
+  RotateSignedPreKeyListener: WhatIsThis;
+  WallClockListener: WhatIsThis;
+
+  deliveryReceiptQueue: PQueue;
+  deliveryReceiptBatcher: BatcherType<DeliveryReceiptBatcherItemType>;
   events: Backbone.Events;
+  activeConfirmationView: WhatIsThis;
+
   Database: {
     open: () => Promise<IDBDatabase>;
     handleDOMException: (
@@ -586,38 +612,6 @@ export type WhisperType = {
       reject: Function
     ) => void;
   };
-  ConversationCollection: typeof ConversationModelCollectionType;
-  ConversationCollectionType: ConversationModelCollectionType;
-  Conversation: typeof ConversationModel;
-  ConversationType: ConversationModel;
-  MessageCollection: typeof MessageModelCollectionType;
-  MessageCollectionType: MessageModelCollectionType;
-  MessageAttributesType: MessageAttributesType;
-  Message: typeof MessageModel;
-  MessageType: MessageModel;
-  GroupMemberConversation: WhatIsThis;
-  KeyChangeListener: WhatIsThis;
-  ClearDataView: WhatIsThis;
-  ReactWrapperView: WhatIsThis;
-  activeConfirmationView: WhatIsThis;
-  ToastView: typeof window.Whisper.View & {
-    show: (view: typeof Backbone.View, el: Element) => void;
-  };
-  ConversationArchivedToast: WhatIsThis;
-  ConversationUnarchivedToast: WhatIsThis;
-  ConversationMarkedUnreadToast: WhatIsThis;
-  WallClockListener: WhatIsThis;
-  BannerView: any;
-  RecorderView: any;
-  GroupMemberList: any;
-  GroupLinkCopiedToast: typeof Backbone.View;
-  InboxView: typeof window.Whisper.View;
-  InstallView: typeof window.Whisper.View;
-  StandaloneRegistrationView: typeof window.Whisper.View;
-  KeyVerificationPanelView: any;
-  SafetyNumberChangeDialogView: any;
-  BodyRangesType: BodyRangesType;
-  BodyRangeType: BodyRangeType;
 
   Notifications: {
     isEnabled: boolean;
@@ -643,45 +637,60 @@ export type WhisperType = {
     update: () => void;
   };
 
-  deliveryReceiptQueue: PQueue;
-  deliveryReceiptBatcher: BatcherType<DeliveryReceiptBatcherItemType>;
-  RotateSignedPreKeyListener: WhatIsThis;
+  // Backbone views
 
-  AlreadyGroupMemberToast: typeof window.Whisper.ToastView;
-  AlreadyRequestedToJoinToast: typeof window.Whisper.ToastView;
-  BlockedGroupToast: typeof window.Whisper.ToastView;
-  BlockedToast: typeof window.Whisper.ToastView;
-  CannotMixImageAndNonImageAttachmentsToast: typeof window.Whisper.ToastView;
-  CaptchaSolvedToast: typeof window.Whisper.ToastView;
-  CaptchaFailedToast: typeof window.Whisper.ToastView;
-  CannotStartGroupCallToast: typeof window.Whisper.ToastView;
-  DangerousFileTypeToast: typeof window.Whisper.ToastView;
-  DecryptionErrorToast: typeof window.Whisper.ToastView;
-  ExpiredToast: typeof window.Whisper.ToastView;
-  FileSavedToast: typeof window.Whisper.ToastView;
-  FileSizeToast: any;
-  FoundButNotLoadedToast: typeof window.Whisper.ToastView;
-  InvalidConversationToast: typeof window.Whisper.ToastView;
-  LeftGroupToast: typeof window.Whisper.ToastView;
-  MaxAttachmentsToast: typeof window.Whisper.ToastView;
-  MessageBodyTooLongToast: typeof window.Whisper.ToastView;
-  OneNonImageAtATimeToast: typeof window.Whisper.ToastView;
-  OriginalNoLongerAvailableToast: typeof window.Whisper.ToastView;
-  OriginalNotFoundToast: typeof window.Whisper.ToastView;
-  PinnedConversationsFullToast: typeof window.Whisper.ToastView;
-  ReactionFailedToast: typeof window.Whisper.ToastView;
-  DeleteForEveryoneFailedToast: typeof window.Whisper.ToastView;
-  TapToViewExpiredIncomingToast: typeof window.Whisper.ToastView;
-  TapToViewExpiredOutgoingToast: typeof window.Whisper.ToastView;
-  TimerConflictToast: typeof window.Whisper.ToastView;
-  UnableToLoadToast: typeof window.Whisper.ToastView;
-  VoiceNoteLimit: typeof window.Whisper.ToastView;
-  VoiceNoteMustBeOnlyAttachmentToast: typeof window.Whisper.ToastView;
+  // Modernized
+  ConversationView: typeof ConversationView;
 
-  ConversationLoadingScreen: typeof window.Whisper.View;
-  ConversationView: typeof window.Whisper.View;
-  View: typeof Backbone.View & {
-    Templates: Record<string, string>;
-  };
-  DisappearingTimeDialog: typeof window.Whisper.View | undefined;
+  // Note: we can no longer use 'View.extend' once we've moved to Typescript's preferred
+  //   'extend View' syntax. Thus, we'll need to typescriptify most of it at once.
+
+  // Toast
+  AlreadyGroupMemberToast: typeof AnyViewClass;
+  AlreadyRequestedToJoinToast: typeof AnyViewClass;
+  BlockedGroupToast: typeof AnyViewClass;
+  BlockedToast: typeof AnyViewClass;
+  CannotMixImageAndNonImageAttachmentsToast: typeof AnyViewClass;
+  CaptchaSolvedToast: typeof AnyViewClass;
+  CaptchaFailedToast: typeof AnyViewClass;
+  CannotStartGroupCallToast: typeof AnyViewClass;
+  ConversationArchivedToast: typeof AnyViewClass;
+  ConversationUnarchivedToast: typeof AnyViewClass;
+  ConversationMarkedUnreadToast: typeof AnyViewClass;
+  DangerousFileTypeToast: typeof AnyViewClass;
+  DecryptionErrorToast: typeof AnyViewClass;
+  ExpiredToast: typeof AnyViewClass;
+  FileSavedToast: typeof AnyViewClass;
+  FileSizeToast: typeof AnyViewClass;
+  FoundButNotLoadedToast: typeof AnyViewClass;
+  GroupLinkCopiedToast: typeof AnyViewClass;
+  InvalidConversationToast: typeof AnyViewClass;
+  LeftGroupToast: typeof AnyViewClass;
+  MaxAttachmentsToast: typeof AnyViewClass;
+  MessageBodyTooLongToast: typeof AnyViewClass;
+  OneNonImageAtATimeToast: typeof AnyViewClass;
+  OriginalNoLongerAvailableToast: typeof AnyViewClass;
+  OriginalNotFoundToast: typeof AnyViewClass;
+  PinnedConversationsFullToast: typeof AnyViewClass;
+  ReactionFailedToast: typeof AnyViewClass;
+  DeleteForEveryoneFailedToast: typeof AnyViewClass;
+  TapToViewExpiredIncomingToast: typeof AnyViewClass;
+  TapToViewExpiredOutgoingToast: typeof AnyViewClass;
+  TimerConflictToast: typeof AnyViewClass;
+  UnableToLoadToast: typeof AnyViewClass;
+  VoiceNoteLimit: typeof AnyViewClass;
+  VoiceNoteMustBeOnlyAttachmentToast: typeof AnyViewClass;
+
+  ClearDataView: typeof AnyViewClass;
+  ConversationLoadingScreen: typeof AnyViewClass;
+  GroupMemberList: typeof AnyViewClass;
+  InboxView: typeof AnyViewClass;
+  InstallView: typeof AnyViewClass;
+  KeyVerificationPanelView: typeof AnyViewClass;
+  ReactWrapperView: typeof BasicReactWrapperViewClass;
+  RecorderView: typeof AnyViewClass;
+  SafetyNumberChangeDialogView: typeof AnyViewClass;
+  StandaloneRegistrationView: typeof AnyViewClass;
+  ToastView: typeof AnyViewClass;
+  View: typeof AnyViewClass;
 };
diff --git a/yarn.lock b/yarn.lock
index 42e176571f23..409af328faae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2363,10 +2363,10 @@
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
   integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
 
-"@types/backbone@1.4.3":
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/@types/backbone/-/backbone-1.4.3.tgz#75dc6e55382e226788db8d796de346891d6b2256"
-  integrity sha512-PZVw2FckEbEJ+qh2hvtgpI/4p8yD3sRbA8FEO72k01/90SSH73GcLW3CqcYP5epwDpLl3cKrgK0yypQY4qiuEw==
+"@types/backbone@1.4.5":
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/@types/backbone/-/backbone-1.4.5.tgz#057d89987fb672a20b896b1df5cc802f7b87c624"
+  integrity sha512-pSqM0eryp6V3G0srBtndUd9IJmiG2BAwYLQGPDcEPMjbfbgitlrN40+Lc1rrMjNMbV5QWywe6WPmNjdqyNTyIw==
   dependencies:
     "@types/jquery" "*"
     "@types/underscore" "*"
@@ -2574,13 +2574,20 @@
   resolved "https://registry.yarnpkg.com/@types/humanize-duration/-/humanize-duration-3.18.1.tgz#10090d596053703e7de0ac43a37b96cd9fc78309"
   integrity sha512-MUgbY3CF7hg/a/jogixmAufLjJBQT7WEf8Q+kYJkOc47ytngg1IuZobCngdTjAgY83JWEogippge5O5fplaQlw==
 
-"@types/jquery@*", "@types/jquery@3.5.0":
+"@types/jquery@*":
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.0.tgz#ccb7dfd317d02d4227dd3803c75297d0c10dad68"
   integrity sha512-C7qQUjpMWDUNYQRTXsP5nbYYwCwwgy84yPgoTT7fPN69NH92wLeCtFaMsWeolJD1AF/6uQw3pYt62rzv83sMmw==
   dependencies:
     "@types/sizzle" "*"
 
+"@types/jquery@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.6.tgz#97ac8e36dccd8ad8ed3f3f3b48933614d9fd8cf0"
+  integrity sha512-SmgCQRzGPId4MZQKDj9Hqc6kSXFNWZFHpELkyK8AQhf8Zr6HKfCzFv9ZC1Fv3FyQttJZOlap3qYb12h61iZAIg==
+  dependencies:
+    "@types/sizzle" "*"
+
 "@types/js-yaml@3.12.0":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.0.tgz#3494ce97358e2675e24e97a747ec23478eeaf8b6"
@@ -2658,6 +2665,11 @@
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.0.0.tgz#a3014921991066193f6c8e47290d4d598dfd19e6"
   integrity sha512-ZS0vBV7Jn5Z/Q4T3VXauEKMDCV8nWOtJJg90OsDylkYJiQwcWtKuLzohWzrthBkerUF7DLMmJcwOPEP0i/AOXw==
 
+"@types/mustache@4.1.2":
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/@types/mustache/-/mustache-4.1.2.tgz#d0e158013c81674a5b6d8780bc3fe234e1804eaf"
+  integrity sha512-c4OVMMcyodKQ9dpwBwh3ofK9P6U9ZktKU9S+p33UqwMNN1vlv2P0zJZUScTshnx7OEoIIRcCFNQ904sYxZz8kg==
+
 "@types/node-fetch@2.5.7":
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.5.7.tgz#20a2afffa882ab04d44ca786449a276f9f6bbf3c"