stream-chat 9.6.0 → 9.7.0

package/src/channel.ts

@@ -406,6 +406,17 @@ export class Channel {
     );
   }
 
+  /**
+   * sendReaction - Sends a reaction to a message. If offline support is enabled, it will make sure
+   * that sending the reaction is queued up if it fails due to bad internet conditions and executed
+   * later.
+   *
+   * @param {string} messageID the message id
+   * @param {Reaction} reaction the reaction object for instance {type: 'love'}
+   * @param {{ enforce_unique?: boolean, skip_push?: boolean }} [options] Option object, {enforce_unique: true, skip_push: true} to override any existing reaction or skip sending push notifications
+   *
+   * @return {Promise<ReactionAPIResponse>} The Server Response
+   */
   async sendReaction(
     messageID: string,
     reaction: Reaction,
@@ -421,7 +432,7 @@ export class Channel {
     try {
       const offlineDb = this.getClient().offlineDb;
       if (offlineDb) {
-        return (await offlineDb.queueTask({
+        return await offlineDb.queueTask<ReactionAPIResponse>({
           task: {
             channelId: this.id as string,
             channelType: this.type,
@@ -429,7 +440,7 @@ export class Channel {
             payload: [messageID, reaction, options],
             type: 'send-reaction',
           },
-        })) as ReactionAPIResponse;
+        });
       }
     } catch (error) {
       this._client.logger('error', `offlineDb:send-reaction`, {
@@ -1463,9 +1474,7 @@ export class Channel {
     this.getClient().polls.hydratePollCache(state.messages, true);
     this.getClient().reminders.hydrateState(state.messages);
 
-    if (state.draft) {
-      this.messageComposer.initState({ composition: state.draft });
-    }
+    this.messageComposer.initStateFromChannelResponse(state);
 
     const areCapabilitiesChanged =
       [...(state.channel.own_capabilities || [])].sort().join() !==
@@ -1613,13 +1622,11 @@ export class Channel {
   /**
    * createDraft - Creates or updates a draft message in a channel
    *
-   * @param {string} channelType The channel type
-   * @param {string} channelID The channel ID
    * @param {DraftMessagePayload} message The draft message to create or update
    *
    * @return {Promise<CreateDraftResponse>} Response containing the created draft
    */
-  async createDraft(message: DraftMessagePayload) {
+  async _createDraft(message: DraftMessagePayload) {
     return await this.getClient().post<CreateDraftResponse>(
       this._channelURL() + '/draft',
       {
@@ -1629,19 +1636,87 @@ export class Channel {
   }
 
   /**
-   * deleteDraft - Deletes a draft message from a channel
+   * createDraft - Creates or updates a draft message in a channel. If offline support is
+   * enabled, it will make sure that creating the draft is queued up if it fails due to
+   * bad internet conditions and executed later.
+   *
+   * @param {DraftMessagePayload} message The draft message to create or update
+   *
+   * @return {Promise<CreateDraftResponse>} Response containing the created draft
+   */
+  async createDraft(message: DraftMessagePayload) {
+    try {
+      const offlineDb = this.getClient().offlineDb;
+      if (offlineDb) {
+        return await offlineDb.queueTask<CreateDraftResponse>({
+          task: {
+            channelId: this.id as string,
+            channelType: this.type,
+            threadId: message.parent_id,
+            payload: [message],
+            type: 'create-draft',
+          },
+        });
+      }
+    } catch (error) {
+      this._client.logger('error', `offlineDb:create-draft`, {
+        tags: ['channel', 'offlineDb'],
+        error,
+      });
+    }
+
+    return this._createDraft(message);
+  }
+
+  /**
+   * deleteDraft - Deletes a draft message from a channel or a thread.
    *
    * @param {Object} options
    * @param {string} options.parent_id Optional parent message ID for drafts in threads
    *
    * @return {Promise<APIResponse>} API response
    */
-  async deleteDraft({ parent_id }: { parent_id?: string } = {}) {
+  async _deleteDraft({ parent_id }: { parent_id?: string } = {}) {
     return await this.getClient().delete<APIResponse>(this._channelURL() + '/draft', {
       parent_id,
     });
   }
 
+  /**
+   * deleteDraft - Deletes a draft message from a channel or a thread. If offline support is
+   * enabled, it will make sure that deleting the draft is queued up if it fails due to
+   * bad internet conditions and executed later.
+   *
+   * @param {Object} options
+   * @param {string} options.parent_id Optional parent message ID for drafts in threads
+   *
+   * @return {Promise<APIResponse>} API response
+   */
+  async deleteDraft(options: { parent_id?: string } = {}) {
+    const { parent_id } = options;
+    try {
+      const offlineDb = this.getClient().offlineDb;
+      if (offlineDb) {
+        return await offlineDb.queueTask<APIResponse>({
+          task: {
+            channelId: this.id as string,
+            channelType: this.type,
+            threadId: parent_id,
+            payload: [options],
+            type: 'delete-draft',
+          },
+        });
+      }
+    } catch (error) {
+      this._client.logger('error', `offlineDb:delete-draft`, {
+        tags: ['channel', 'offlineDb'],
+        error,
+      });
+    }
+
+    return this._deleteDraft(options);
+  }
+
   /**
    * getDraft - Retrieves a draft message from a channel
    *

package/src/client.ts

@@ -1969,9 +1969,7 @@ export class StreamChat {
         this.reminders.hydrateState(channelState.messages);
       }
 
-      if (channelState.draft) {
-        c.messageComposer.initState({ composition: channelState.draft });
-      }
+      c.messageComposer.initStateFromChannelResponse(channelState);
 
       channels.push(c);
     }
@@ -4570,4 +4568,64 @@ export class StreamChat {
       ...rest,
     });
   }
+
+  /**
+   * uploadFile - Uploads a file to the configured storage (defaults to Stream CDN)
+   *
+   * @param {string|NodeJS.ReadableStream|Buffer|File} uri The file to upload
+   * @param {string} [name] The name of the file
+   * @param {string} [contentType] The content type of the file
+   * @param {UserResponse} [user] Optional user information
+   *
+   * @return {Promise<SendFileAPIResponse>} Response containing the file URL
+   */
+  uploadFile(
+    uri: string | NodeJS.ReadableStream | Buffer | File,
+    name?: string,
+    contentType?: string,
+    user?: UserResponse,
+  ) {
+    return this.sendFile(`${this.baseURL}/uploads/file`, uri, name, contentType, user);
+  }
+
+  /**
+   * uploadImage - Uploads an image to the configured storage (defaults to Stream CDN)
+   *
+   * @param {string|NodeJS.ReadableStream|File} uri The image to upload
+   * @param {string} [name] The name of the image
+   * @param {string} [contentType] The content type of the image
+   * @param {UserResponse} [user] Optional user information
+   *
+   * @return {Promise<SendFileAPIResponse>} Response containing the image URL
+   */
+  uploadImage(
+    uri: string | NodeJS.ReadableStream | File,
+    name?: string,
+    contentType?: string,
+    user?: UserResponse,
+  ) {
+    return this.sendFile(`${this.baseURL}/uploads/image`, uri, name, contentType, user);
+  }
+
+  /**
+   * deleteFile - Deletes a file from the configured storage
+   *
+   * @param {string} url The URL of the file to delete
+   *
+   * @return {Promise<APIResponse>} The server response
+   */
+  deleteFile(url: string) {
+    return this.delete<APIResponse>(`${this.baseURL}/uploads/file`, { url });
+  }
+
+  /**
+   * deleteImage - Deletes an image from the configured storage
+   *
+   * @param {string} url The URL of the image to delete
+   *
+   * @return {Promise<APIResponse>} The server response
+   */
+  deleteImage(url: string) {
+    return this.delete<APIResponse>(`${this.baseURL}/uploads/image`, { url });
+  }
 }

package/src/messageComposer/messageComposer.ts

@@ -10,11 +10,12 @@ import {
   MessageDraftComposerMiddlewareExecutor,
 } from './middleware';
 import { StateStore } from '../store';
-import { formatMessage, generateUUIDv4, isLocalMessage } from '../utils';
+import { formatMessage, generateUUIDv4, isLocalMessage, unformatMessage } from '../utils';
 import { mergeWith } from '../utils/mergeWith';
 import { Channel } from '../channel';
 import { Thread } from '../thread';
 import type {
+  ChannelAPIResponse,
   DraftMessage,
   DraftResponse,
   EventTypes,
@@ -114,8 +115,6 @@ const initState = (
   };
 };
 
-const noop = () => undefined;
-
 export class MessageComposer extends WithSubscriptions {
   readonly channel: Channel;
   readonly state: StateStore<MessageComposerState>;
@@ -282,6 +281,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 ||
@@ -344,6 +347,25 @@ export class MessageComposer extends WithSubscriptions {
     }
   };
 
+  initStateFromChannelResponse = (channelApiResponse: ChannelAPIResponse) => {
+    if (this.channel.cid !== channelApiResponse.channel.cid) {
+      return;
+    }
+    if (channelApiResponse.draft) {
+      this.initState({ composition: channelApiResponse.draft });
+    } else if (this.state.getLatestValue().draftId) {
+      this.clear();
+      this.client.offlineDb?.executeQuerySafely(
+        (db) =>
+          db.deleteDraft({
+            cid: this.channel.cid,
+            parent_id: undefined, // makes sure that we don't delete thread drafts while upserting channels
+          }),
+        { method: 'deleteDraft' },
+      );
+    }
+  };
+
   initEditingAuditState = (
     composition?: DraftResponse | MessageResponse | LocalMessage,
   ) => initEditingAuditState(composition);
@@ -362,24 +384,34 @@ export class MessageComposer extends WithSubscriptions {
     });
   }
 
+  public registerDraftEventSubscriptions = () => {
+    const unsubscribeDraftUpdated = this.subscribeDraftUpdated();
+    const unsubscribeDraftDeleted = this.subscribeDraftDeleted();
+
+    return () => {
+      unsubscribeDraftUpdated();
+      unsubscribeDraftDeleted();
+    };
+  };
+
   public registerSubscriptions = (): UnregisterSubscriptions => {
-    if (this.hasSubscriptions) {
-      // Already listening for events and changes
-      return noop;
+    if (!this.hasSubscriptions) {
+      this.addUnsubscribeFunction(this.subscribeMessageComposerSetupStateChange());
+      this.addUnsubscribeFunction(this.subscribeMessageUpdated());
+      this.addUnsubscribeFunction(this.subscribeMessageDeleted());
+
+      this.addUnsubscribeFunction(this.subscribeTextComposerStateChanged());
+      this.addUnsubscribeFunction(this.subscribeAttachmentManagerStateChanged());
+      this.addUnsubscribeFunction(this.subscribeLinkPreviewsManagerStateChanged());
+      this.addUnsubscribeFunction(this.subscribePollComposerStateChanged());
+      this.addUnsubscribeFunction(this.subscribeCustomDataManagerStateChanged());
+      this.addUnsubscribeFunction(this.subscribeMessageComposerStateChanged());
+      this.addUnsubscribeFunction(this.subscribeMessageComposerConfigStateChanged());
     }
-    this.addUnsubscribeFunction(this.subscribeMessageComposerSetupStateChange());
-    this.addUnsubscribeFunction(this.subscribeMessageUpdated());
-    this.addUnsubscribeFunction(this.subscribeMessageDeleted());
-
-    this.addUnsubscribeFunction(this.subscribeTextComposerStateChanged());
-    this.addUnsubscribeFunction(this.subscribeAttachmentManagerStateChanged());
-    this.addUnsubscribeFunction(this.subscribeLinkPreviewsManagerStateChanged());
-    this.addUnsubscribeFunction(this.subscribePollComposerStateChanged());
-    this.addUnsubscribeFunction(this.subscribeCustomDataManagerStateChanged());
-    this.addUnsubscribeFunction(this.subscribeMessageComposerStateChanged());
-    this.addUnsubscribeFunction(this.subscribeMessageComposerConfigStateChanged());
-
-    return this.unregisterSubscriptions.bind(this);
+
+    this.incrementRefCount();
+
+    return () => this.unregisterSubscriptions();
   };
 
   private subscribeMessageUpdated = () => {
@@ -440,7 +472,7 @@ export class MessageComposer extends WithSubscriptions {
       const draft = event.draft as DraftResponse;
       if (
         !draft ||
-        !!draft.parent_id !== !!this.threadId ||
+        (draft.parent_id ?? null) !== (this.threadId ?? null) ||
         draft.channel_cid !== this.channel.cid
       )
         return;
@@ -452,7 +484,7 @@ export class MessageComposer extends WithSubscriptions {
       const draft = event.draft as DraftResponse;
       if (
         !draft ||
-        !!draft.parent_id !== !!this.threadId ||
+        (draft.parent_id ?? null) !== (this.threadId ?? null) ||
         draft.channel_cid !== this.channel.cid
       ) {
         return;
@@ -550,7 +582,7 @@ export class MessageComposer extends WithSubscriptions {
     });
 
   private subscribeMessageComposerConfigStateChanged = () => {
-    let draftUnsubscribeFunctions: Unsubscribe[] | null;
+    let draftUnsubscribeFunction: Unsubscribe | null;
 
     const unsubscribe = this.configState.subscribeWithSelector(
       (currentValue) => ({
@@ -565,20 +597,17 @@ export class MessageComposer extends WithSubscriptions {
           });
         }
 
-        if (draftsEnabled && !draftUnsubscribeFunctions) {
-          draftUnsubscribeFunctions = [
-            this.subscribeDraftUpdated(),
-            this.subscribeDraftDeleted(),
-          ];
-        } else if (!draftsEnabled && draftUnsubscribeFunctions) {
-          draftUnsubscribeFunctions.forEach((fn) => fn());
-          draftUnsubscribeFunctions = null;
+        if (draftsEnabled && !draftUnsubscribeFunction) {
+          draftUnsubscribeFunction = this.registerDraftEventSubscriptions();
+        } else if (!draftsEnabled && draftUnsubscribeFunction) {
+          draftUnsubscribeFunction();
+          draftUnsubscribeFunction = null;
         }
       },
     );
 
     return () => {
-      draftUnsubscribeFunctions?.forEach((unsubscribe) => unsubscribe());
+      draftUnsubscribeFunction?.();
       unsubscribe();
     };
   };
@@ -660,6 +689,25 @@ export class MessageComposer extends WithSubscriptions {
     if (!composition) return;
     const { draft } = composition;
     this.state.partialNext({ draftId: draft.id });
+    if (this.client.offlineDb) {
+      try {
+        const optimisticDraftResponse = {
+          channel_cid: this.channel.cid,
+          created_at: new Date().toISOString(),
+          message: draft as DraftMessage,
+          parent_id: draft.parent_id,
+          quoted_message: this.quotedMessage
+            ? unformatMessage(this.quotedMessage)
+            : undefined,
+        };
+        await this.client.offlineDb.upsertDraft({ draft: optimisticDraftResponse });
+      } catch (error) {
+        this.client.logger('error', `offlineDb:upsertDraft`, {
+          tags: ['channel', 'offlineDb'],
+          error,
+        });
+      }
+    }
     this.logDraftUpdateTimestamp();
     await this.channel.createDraft(draft);
   };
@@ -667,8 +715,64 @@ export class MessageComposer extends WithSubscriptions {
   deleteDraft = async () => {
     if (this.editedMessage || !this.config.drafts.enabled || !this.draftId) return;
     this.state.partialNext({ draftId: null }); // todo: should we clear the whole state?
+    const parentId = this.threadId ?? undefined;
+    if (this.client.offlineDb) {
+      try {
+        await this.client.offlineDb.deleteDraft({
+          cid: this.channel.cid,
+          parent_id: parentId,
+        });
+      } catch (error) {
+        this.client.logger('error', `offlineDb:deleteDraft`, {
+          tags: ['channel', 'offlineDb'],
+          error,
+        });
+      }
+    }
     this.logDraftUpdateTimestamp();
-    await this.channel.deleteDraft({ parent_id: this.threadId ?? undefined });
+    await this.channel.deleteDraft({ parent_id: parentId });
+  };
+
+  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 () => {

package/src/messageComposer/middleware/textComposer/commands.ts

@@ -1,14 +1,14 @@
 import type { Channel } from '../../../channel';
 import type { Middleware } from '../../../middleware';
 import type { SearchSourceOptions } from '../../../search';
-import { BaseSearchSource } from '../../../search';
+import { BaseSearchSourceSync } from '../../../search';
 import type { CommandResponse } from '../../../types';
 import { mergeWith } from '../../../utils/mergeWith';
 import type { CommandSuggestion, TextComposerMiddlewareOptions } from './types';
 import { getTriggerCharWithToken, insertItemWithTrigger } from './textMiddlewareUtils';
 import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
 
-export class CommandSearchSource extends BaseSearchSource<CommandSuggestion> {
+export class CommandSearchSource extends BaseSearchSourceSync<CommandSuggestion> {
   readonly type = 'commands';
   private channel: Channel;
 
@@ -64,15 +64,14 @@ export class CommandSearchSource extends BaseSearchSource<CommandSuggestion> {
 
       return 0;
     });
-    return Promise.resolve({
+
+    return {
       items: selectedCommands.map((c) => ({ ...c, id: c.name })),
       next: null,
-    });
+    };
   }
 
-  protected filterQueryResults(
-    items: CommandSuggestion[],
-  ): CommandSuggestion[] | Promise<CommandSuggestion[]> {
+  protected filterQueryResults(items: CommandSuggestion[]) {
     return items;
   }
 }

package/src/messageComposer/middleware/textComposer/mentions.ts

@@ -3,8 +3,7 @@ import {
   getTriggerCharWithToken,
   insertItemWithTrigger,
 } from './textMiddlewareUtils';
-import type { SearchSourceOptions } from '../../../search';
-import { BaseSearchSource } from '../../../search';
+import { BaseSearchSource, type SearchSourceOptions } from '../../../search';
 import { mergeWith } from '../../../utils/mergeWith';
 import type { TextComposerMiddlewareOptions, UserSuggestion } from './types';
 import type { StreamChat } from '../../../client';

package/src/messageComposer/middleware/textComposer/types.ts

@@ -1,7 +1,7 @@
 import type { MessageComposer } from '../../messageComposer';
 import type { CommandResponse, UserResponse } from '../../../types';
 import type { TokenizationPayload } from './textMiddlewareUtils';
-import type { SearchSource } from '../../../search';
+import type { SearchSource, SearchSourceSync } from '../../../search';
 import type { CustomTextComposerSuggestion } from '../../types.custom';
 
 export type TextComposerSuggestion<T = unknown> = T & {
@@ -28,7 +28,7 @@ export type TextComposerMiddlewareExecutorOptions = {
 
 export type Suggestions<T extends Suggestion = Suggestion> = {
   query: string;
-  searchSource: SearchSource<T>;
+  searchSource: SearchSource<T> | SearchSourceSync<T>;
   trigger: string;
 };
 

package/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
@@ -1050,6 +1121,14 @@ export abstract class AbstractOfflineDB implements OfflineDBApi {
         return await channel._deleteReaction(...task.payload);
       }
 
+      if (task.type === 'create-draft') {
+        return await channel._createDraft(...task.payload);
+      }
+
+      if (task.type === 'delete-draft') {
+        return await channel._deleteDraft(...task.payload);
+      }
+
       if (task.type === 'send-message') {
         const newMessageResponse = await channel._sendMessage(...task.payload);
         const newMessage = newMessageResponse?.message;