feat: handle offline support for drafts (#1559)

## CLA

- [x] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required).
- [x] Code changes are tested

## Description of the changes, What, Why and How?

The goal of the PR is to handle offline support for draft messages and
also allow composing a message when the composition is not empty when
the offline DB is enabled. Thanks to @isekovanic for the help with the
offline support explanation here.

## Changelog

-

Author: khushal87

src/messageComposer/messageComposer.ts

@@ -280,6 +280,10 @@ export class MessageComposer extends WithSubscriptions {
   }
 
   get hasSendableData() {
+    // If the offline mode is enabled, we allow sending a message if the composition is not empty.
+    if (this.client.offlineDb) {
+      return !this.compositionIsEmpty;
+    }
     return !!(
       (!this.attachmentManager.uploadsInProgressCount &&
         (!this.textComposer.textIsEmpty ||
@@ -669,6 +673,48 @@ export class MessageComposer extends WithSubscriptions {
     await this.channel.deleteDraft({ parent_id: this.threadId ?? undefined });
   };
 
+  getDraft = async () => {
+    if (this.editedMessage || !this.config.drafts.enabled || !this.client.userID) return;
+
+    const draftFromOfflineDB = await this.client.offlineDb?.getDraft({
+      cid: this.channel.cid,
+      userId: this.client.userID,
+      parent_id: this.threadId ?? undefined,
+    });
+
+    if (draftFromOfflineDB) {
+      this.initState({ composition: draftFromOfflineDB });
+    }
+
+    try {
+      const response = await this.channel.getDraft({
+        parent_id: this.threadId ?? undefined,
+      });
+
+      const { draft } = response;
+
+      if (!draft) return;
+
+      this.client.offlineDb?.executeQuerySafely(
+        (db) =>
+          db.upsertDraft({
+            draft,
+          }),
+        { method: 'upsertDraft' },
+      );
+
+      this.initState({ composition: draft });
+    } catch (error) {
+      this.client.notifications.add({
+        message: 'Failed to get the draft',
+        origin: {
+          emitter: 'MessageComposer',
+          context: { composer: this },
+        },
+      });
+    }
+  };
+
   createPoll = async () => {
     const composition = await this.pollComposer.compose();
     if (!composition || !composition.data.id) return;

src/offline-support/offline_support_api.ts

@@ -194,6 +194,35 @@ export abstract class AbstractOfflineDB implements OfflineDBApi {
    */
   abstract updateMessage: OfflineDBApi['updateMessage'];
 
+  /**
+   * @abstract
+   * Fetches the provided draft from the DB. Should return as close to
+   * the server side DraftResponse as possible.
+   * @param {DBGetDraftType} options
+   * @returns {Promise<DraftResponse | null>}
+   */
+  abstract getDraft: OfflineDBApi['getDraft'];
+  /**
+   * @abstract
+   * Upserts a draft in the DB.
+   * Will write to the draft table upserting the draft.
+   * Will return the prepared queries for delayed execution (even if they are
+   * already executed).
+   * @param {DBUpsertDraftType} options
+   * @returns {Promise<ExecuteBatchDBQueriesType>}
+   */
+  abstract upsertDraft: OfflineDBApi['upsertDraft'];
+  /**
+   * @abstract
+   * Deletes a draft from the DB.
+   * Will write to the draft table removing the draft.
+   * Will return the prepared queries for delayed execution (even if they are
+   * already executed).
+   * @param {DBDeleteDraftType} options
+   * @returns {Promise<ExecuteBatchDBQueriesType>}
+   */
+  abstract deleteDraft: OfflineDBApi['deleteDraft'];
+
   /**
    * @abstract
    * Fetches the provided channels from the DB and aggregates all data associated
@@ -896,6 +925,44 @@ export abstract class AbstractOfflineDB implements OfflineDBApi {
     );
   };
 
+  /**
+   * A utility handler for all draft events:
+   * - draft.updated -> updateDraft
+   * - draft.deleted -> deleteDraft
+   * @param event - the WS event we are trying to process
+   * @param execute - whether to immediately execute the operation.
+   */
+  handleDraftEvent = async ({
+    event,
+    execute = true,
+  }: {
+    event: Event;
+    execute?: boolean;
+  }) => {
+    const { cid, draft, type } = event;
+
+    if (!draft) return [];
+
+    if (type === 'draft.updated') {
+      return await this.upsertDraft({
+        draft,
+        execute,
+      });
+    }
+
+    if (type === 'draft.deleted') {
+      if (!cid) return [];
+
+      return await this.deleteDraft({
+        cid,
+        parent_id: draft.parent_id,
+        execute,
+      });
+    }
+
+    return [];
+  };
+
   /**
    * A generic event handler that decides which DB API to invoke based on
    * event.type for all events we are currently handling. It is used to both
@@ -944,6 +1011,10 @@ export abstract class AbstractOfflineDB implements OfflineDBApi {
       return await this.handleChannelVisibilityEvent({ event, execute });
     }
 
+    if (type === 'draft.updated' || type === 'draft.deleted') {
+      return await this.handleDraftEvent({ event, execute });
+    }
+
     // Note: It is a bit counter-intuitive that we do not touch the messages in the
     //       offline DB when receiving notification.message_new, however we do this
     //       because we anyway cannot get the messages for a channel until we run

src/offline-support/types.ts

@@ -5,6 +5,7 @@ import type {
   ChannelMemberResponse,
   ChannelResponse,
   ChannelSort,
+  DraftResponse,
   LocalMessage,
   MessageResponse,
   PollResponse,
@@ -300,6 +301,31 @@ export type DBChannelExistsType = {
   cid: string;
 };
 
+export type DBUpsertDraftType = {
+  /** Draft message to upsert. */
+  draft: DraftResponse;
+  /** Whether to immediately execute the operation. */
+  execute?: boolean;
+};
+
+export type DBGetDraftType = {
+  /** Channel ID for which to get the draft. */
+  cid: string;
+  /** ID of the user requesting the draft. */
+  userId: string;
+  /** Optional parent ID for the parent message in thread, if applicable. */
+  parent_id?: string;
+};
+
+export type DBDeleteDraftType = {
+  /** Channel ID for which to delete the draft. */
+  cid: string;
+  /** Optional parent ID for the parent message in thread, if applicable. */
+  parent_id?: string;
+  /** Whether to immediately execute the operation. */
+  execute?: boolean;
+};
+
 /**
  * Represents a list of batch SQL queries to be executed.
  */
@@ -317,6 +343,7 @@ export interface OfflineDBApi {
   upsertAppSettings: (
     options: DBUpsertAppSettingsType,
   ) => Promise<ExecuteBatchDBQueriesType>;
+  upsertDraft: (options: DBUpsertDraftType) => Promise<ExecuteBatchDBQueriesType>;
   upsertPoll: (options: DBUpsertPollType) => Promise<ExecuteBatchDBQueriesType>;
   upsertChannelData: (
     options: DBUpsertChannelDataType,
@@ -326,6 +353,7 @@ export interface OfflineDBApi {
   upsertMembers: (options: DBUpsertMembersType) => Promise<ExecuteBatchDBQueriesType>;
   updateReaction: (options: DBUpdateReactionType) => Promise<ExecuteBatchDBQueriesType>;
   updateMessage: (options: DBUpdateMessageType) => Promise<ExecuteBatchDBQueriesType>;
+  getDraft: (options: DBGetDraftType) => Promise<DraftResponse | null>;
   getChannels: (
     options: DBGetChannelsType,
   ) => Promise<Omit<ChannelAPIResponse, 'duration'>[] | null>;
@@ -341,6 +369,7 @@ export interface OfflineDBApi {
   executeSqlBatch: (queries: ExecuteBatchDBQueriesType) => Promise<unknown>;
   addPendingTask: (task: PendingTask) => Promise<() => Promise<void>>;
   getPendingTasks: (conditions?: DBGetPendingTasksType) => Promise<PendingTask[]>;
+  deleteDraft: (options: DBDeleteDraftType) => Promise<ExecuteBatchDBQueriesType>;
   deletePendingTask: (
     options: DBDeletePendingTaskType,
   ) => Promise<ExecuteBatchDBQueriesType>;