stream-chat 9.6.1 → 9.7.0

package/dist/cjs/index.browser.cjs

@@ -161,6 +161,7 @@ __export(index_exports, {
   AttachmentManager: () => AttachmentManager,
   BasePaginator: () => BasePaginator,
   BaseSearchSource: () => BaseSearchSource,
+  BaseSearchSourceSync: () => BaseSearchSourceSync,
   BuiltinPermissions: () => BuiltinPermissions,
   BuiltinRoles: () => BuiltinRoles,
   Campaign: () => Campaign,
@@ -2757,6 +2758,23 @@ function formatMessage(message) {
     quoted_message: toLocalMessageBase(message.quoted_message)
   };
 }
+function unformatMessage(message) {
+  const toMessageResponseBase = (msg) => {
+    if (!msg) return null;
+    const newDateString = (/* @__PURE__ */ new Date()).toISOString();
+    return {
+      ...msg,
+      created_at: message.created_at ? message.created_at.toISOString() : newDateString,
+      deleted_at: message.deleted_at ? message.deleted_at.toISOString() : void 0,
+      pinned_at: message.pinned_at ? message.pinned_at.toISOString() : void 0,
+      updated_at: message.updated_at ? message.updated_at.toISOString() : newDateString
+    };
+  };
+  return {
+    ...toMessageResponseBase(message),
+    quoted_message: toMessageResponseBase(message.quoted_message)
+  };
+}
 var localMessageToNewMessagePayload = (localMessage) => {
   const {
     // Remove all timestamp fields and client-specific fields.
@@ -6296,11 +6314,8 @@ var DEFAULT_SEARCH_SOURCE_OPTIONS = {
   debounceMs: 300,
   pageSize: 10
 };
-var BaseSearchSource = class {
+var BaseSearchSourceBase = class {
   constructor(options) {
-    this.setDebounceOptions = ({ debounceMs }) => {
-      this.searchDebounced = debounce(this.executeQuery.bind(this), debounceMs);
-    };
     this.activate = () => {
       if (this.isActive) return;
       this.state.partialNext({ isActive: true });
@@ -6314,11 +6329,9 @@ var BaseSearchSource = class {
       const searchString = newSearchString ?? this.searchQuery;
       return !!(this.isActive && !this.isLoading && (this.hasNext || hasNewSearchQuery) && searchString);
     };
-    this.search = (searchQuery) => this.searchDebounced(searchQuery);
-    const { debounceMs, pageSize } = { ...DEFAULT_SEARCH_SOURCE_OPTIONS, ...options };
+    const { pageSize } = { ...DEFAULT_SEARCH_SOURCE_OPTIONS, ...options };
     this.pageSize = pageSize;
     this.state = new StateStore(this.initialState);
-    this.setDebounceOptions({ debounceMs });
   }
   get lastQueryError() {
     return this.state.getLatestValue().lastQueryError;
@@ -6378,8 +6391,7 @@ var BaseSearchSource = class {
       items: isFirstPage ? stateUpdate.items : [...this.items ?? [], ...stateUpdate.items || []]
     };
   }
-  async executeQuery(newSearchString) {
-    if (!this.canExecuteQuery(newSearchString)) return;
+  prepareStateForQuery(newSearchString) {
     const hasNewSearchQuery = typeof newSearchString !== "undefined";
     const searchString = newSearchString ?? this.searchQuery;
     if (hasNewSearchQuery) {
@@ -6387,18 +6399,47 @@ var BaseSearchSource = class {
     } else {
       this.state.partialNext({ isLoading: true });
     }
+    return { searchString, hasNewSearchQuery };
+  }
+  updatePaginationStateFromQuery(result) {
+    const { items, next } = result;
     const stateUpdate = {};
+    if (next || next === null) {
+      stateUpdate.next = next;
+      stateUpdate.hasNext = !!next;
+    } else {
+      stateUpdate.offset = (this.offset ?? 0) + items.length;
+      stateUpdate.hasNext = items.length === this.pageSize;
+    }
+    return stateUpdate;
+  }
+  resetState() {
+    this.state.next(this.initialState);
+  }
+  resetStateAndActivate() {
+    this.resetState();
+    this.activate();
+  }
+};
+var BaseSearchSource = class extends BaseSearchSourceBase {
+  constructor(options) {
+    const { debounceMs } = { ...DEFAULT_SEARCH_SOURCE_OPTIONS, ...options };
+    super(options);
+    this.setDebounceOptions = ({ debounceMs }) => {
+      this.searchDebounced = debounce(this.executeQuery.bind(this), debounceMs);
+    };
+    this.search = (searchQuery) => this.searchDebounced(searchQuery);
+    this.setDebounceOptions({ debounceMs });
+  }
+  async executeQuery(newSearchString) {
+    if (!this.canExecuteQuery(newSearchString)) return;
+    const { hasNewSearchQuery, searchString } = this.prepareStateForQuery(newSearchString);
+    let stateUpdate = {};
     try {
       const results = await this.query(searchString);
       if (!results) return;
-      const { items, next } = results;
-      if (next || next === null) {
-        stateUpdate.next = next;
-        stateUpdate.hasNext = !!next;
-      } else {
-        stateUpdate.offset = (this.offset ?? 0) + items.length;
-        stateUpdate.hasNext = items.length === this.pageSize;
-      }
+      const { items } = results;
+      stateUpdate = this.updatePaginationStateFromQuery(results);
       stateUpdate.items = await this.filterQueryResults(items);
     } catch (e) {
       stateUpdate.lastQueryError = e;
@@ -6409,12 +6450,35 @@ var BaseSearchSource = class {
   cancelScheduledQuery() {
     this.searchDebounced.cancel();
   }
-  resetState() {
-    this.state.next(this.initialState);
+};
+var BaseSearchSourceSync = class extends BaseSearchSourceBase {
+  constructor(options) {
+    const { debounceMs } = { ...DEFAULT_SEARCH_SOURCE_OPTIONS, ...options };
+    super(options);
+    this.setDebounceOptions = ({ debounceMs }) => {
+      this.searchDebounced = debounce(this.executeQuery.bind(this), debounceMs);
+    };
+    this.search = (searchQuery) => this.searchDebounced(searchQuery);
+    this.setDebounceOptions({ debounceMs });
   }
-  resetStateAndActivate() {
-    this.resetState();
-    this.activate();
+  executeQuery(newSearchString) {
+    if (!this.canExecuteQuery(newSearchString)) return;
+    const { hasNewSearchQuery, searchString } = this.prepareStateForQuery(newSearchString);
+    let stateUpdate = {};
+    try {
+      const results = this.query(searchString);
+      if (!results) return;
+      const { items } = results;
+      stateUpdate = this.updatePaginationStateFromQuery(results);
+      stateUpdate.items = this.filterQueryResults(items);
+    } catch (e) {
+      stateUpdate.lastQueryError = e;
+    } finally {
+      this.state.next(this.getStateAfterQuery(stateUpdate, hasNewSearchQuery));
+    }
+  }
+  cancelScheduledQuery() {
+    this.searchDebounced.cancel();
   }
 };
 
@@ -6697,7 +6761,7 @@ var getTokenizedSuggestionDisplayName = ({
 });
 
 // src/messageComposer/middleware/textComposer/commands.ts
-var CommandSearchSource = class extends BaseSearchSource {
+var CommandSearchSource = class extends BaseSearchSourceSync {
   constructor(channel, options) {
     super(options);
     this.type = "commands";
@@ -6741,10 +6805,10 @@ var CommandSearchSource = class extends BaseSearchSource {
       }
       return 0;
     });
-    return Promise.resolve({
+    return {
       items: selectedCommands.map((c) => ({ ...c, id: c.name })),
       next: null
-    });
+    };
   }
   filterQueryResults(items) {
     return items;
@@ -7902,7 +7966,33 @@ var _MessageComposer = class _MessageComposer extends WithSubscriptions {
         this.editedMessage = message;
       }
     };
+    this.initStateFromChannelResponse = (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: void 0
+            // makes sure that we don't delete thread drafts while upserting channels
+          }),
+          { method: "deleteDraft" }
+        );
+      }
+    };
     this.initEditingAuditState = (composition) => initEditingAuditState(composition);
+    this.registerDraftEventSubscriptions = () => {
+      const unsubscribeDraftUpdated = this.subscribeDraftUpdated();
+      const unsubscribeDraftDeleted = this.subscribeDraftDeleted();
+      return () => {
+        unsubscribeDraftUpdated();
+        unsubscribeDraftDeleted();
+      };
+    };
     this.registerSubscriptions = () => {
       if (!this.hasSubscriptions) {
         this.addUnsubscribeFunction(this.subscribeMessageComposerSetupStateChange());
@@ -7967,13 +8057,13 @@ var _MessageComposer = class _MessageComposer extends WithSubscriptions {
     }).unsubscribe;
     this.subscribeDraftUpdated = () => this.client.on("draft.updated", (event) => {
       const draft = event.draft;
-      if (!draft || !!draft.parent_id !== !!this.threadId || draft.channel_cid !== this.channel.cid)
+      if (!draft || (draft.parent_id ?? null) !== (this.threadId ?? null) || draft.channel_cid !== this.channel.cid)
         return;
       this.initState({ composition: draft });
     }).unsubscribe;
     this.subscribeDraftDeleted = () => this.client.on("draft.deleted", (event) => {
       const draft = event.draft;
-      if (!draft || !!draft.parent_id !== !!this.threadId || draft.channel_cid !== this.channel.cid) {
+      if (!draft || (draft.parent_id ?? null) !== (this.threadId ?? null) || draft.channel_cid !== this.channel.cid) {
         return;
       }
       this.logDraftUpdateTimestamp();
@@ -8037,7 +8127,7 @@ var _MessageComposer = class _MessageComposer extends WithSubscriptions {
       }
     });
     this.subscribeMessageComposerConfigStateChanged = () => {
-      let draftUnsubscribeFunctions;
+      let draftUnsubscribeFunction;
       const unsubscribe = this.configState.subscribeWithSelector(
         (currentValue) => ({
           textDefaultValue: currentValue.text.defaultValue,
@@ -8050,19 +8140,16 @@ var _MessageComposer = class _MessageComposer extends WithSubscriptions {
               selection: { start: 0, end: 0 }
             });
           }
-          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((unsubscribe2) => unsubscribe2());
+        draftUnsubscribeFunction?.();
         unsubscribe();
       };
     };
@@ -8132,14 +8219,78 @@ var _MessageComposer = 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: (/* @__PURE__ */ new Date()).toISOString(),
+            message: draft,
+            parent_id: draft.parent_id,
+            quoted_message: this.quotedMessage ? unformatMessage(this.quotedMessage) : void 0
+          };
+          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);
     };
     this.deleteDraft = async () => {
       if (this.editedMessage || !this.config.drafts.enabled || !this.draftId) return;
       this.state.partialNext({ draftId: null });
+      const parentId = this.threadId ?? void 0;
+      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 ?? void 0 });
+      await this.channel.deleteDraft({ parent_id: parentId });
+    };
+    this.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 ?? void 0
+      });
+      if (draftFromOfflineDB) {
+        this.initState({ composition: draftFromOfflineDB });
+      }
+      try {
+        const response = await this.channel.getDraft({
+          parent_id: this.threadId ?? void 0
+        });
+        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 }
+          }
+        });
+      }
     };
     this.createPoll = async () => {
       const composition = await this.pollComposer.compose();
@@ -8268,6 +8419,9 @@ var _MessageComposer = class _MessageComposer extends WithSubscriptions {
     return this.state.getLatestValue().showReplyInChannel;
   }
   get hasSendableData() {
+    if (this.client.offlineDb) {
+      return !this.compositionIsEmpty;
+    }
     return !!(!this.attachmentManager.uploadsInProgressCount && (!this.textComposer.textIsEmpty || this.attachmentManager.successfulUploadsCount > 0) || this.pollId);
   }
   get compositionIsEmpty() {
@@ -8583,6 +8737,17 @@ var Channel = class {
       updates
     );
   }
+  /**
+   * 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, reaction, options) {
     if (!messageID) {
       throw Error(`Message id is missing`);
@@ -9435,9 +9600,7 @@ var Channel = class {
     };
     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() !== [
       ...this.data && Array.isArray(this.data?.own_capabilities) ? this.data.own_capabilities : []
     ].sort().join();
@@ -9564,13 +9727,11 @@ var Channel = class {
   /**
    * 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) {
+  async _createDraft(message) {
     return await this.getClient().post(
       this._channelURL() + "/draft",
       {
@@ -9579,18 +9740,82 @@ var Channel = class {
     );
   }
   /**
-   * 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) {
+    try {
+      const offlineDb = this.getClient().offlineDb;
+      if (offlineDb) {
+        return await offlineDb.queueTask({
+          task: {
+            channelId: this.id,
+            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 } = {}) {
+  async _deleteDraft({ parent_id } = {}) {
     return await this.getClient().delete(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 = {}) {
+    const { parent_id } = options;
+    try {
+      const offlineDb = this.getClient().offlineDb;
+      if (offlineDb) {
+        return await offlineDb.queueTask({
+          task: {
+            channelId: this.id,
+            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
    *
@@ -14240,9 +14465,7 @@ var StreamChat = class _StreamChat {
         this.polls.hydratePollCache(channelState.messages, true);
         this.reminders.hydrateState(channelState.messages);
       }
-      if (channelState.draft) {
-        c.messageComposer.initState({ composition: channelState.draft });
-      }
+      c.messageComposer.initStateFromChannelResponse(channelState);
       channels.push(c);
     }
     return channels;
@@ -15159,7 +15382,7 @@ var StreamChat = class _StreamChat {
     if (this.userAgent) {
       return this.userAgent;
     }
-    const version = "9.6.1";
+    const version = "9.7.0";
     const clientBundle = "browser-cjs";
     let userAgentString = "";
     if (this.sdkIdentifier) {
@@ -16248,6 +16471,52 @@ var StreamChat = 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, name, contentType, user) {
+    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, name, contentType, user) {
+    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) {
+    return this.delete(`${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) {
+    return this.delete(`${this.baseURL}/uploads/image`, { url });
+  }
 };
 
 // src/events.ts
@@ -16956,6 +17225,35 @@ var AbstractOfflineDB = class {
         (executeOverride) => reactionMethod({ message, reaction, execute: executeOverride })
       );
     };
+    /**
+     * 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.
+     */
+    this.handleDraftEvent = async ({
+      event,
+      execute = true
+    }) => {
+      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
@@ -16992,6 +17290,9 @@ var AbstractOfflineDB = class {
       if (type === "channel.hidden" || type === "channel.visible") {
         return await this.handleChannelVisibilityEvent({ event, execute });
       }
+      if (type === "draft.updated" || type === "draft.deleted") {
+        return await this.handleDraftEvent({ event, execute });
+      }
       if ((type === "channel.updated" || type === "notification.message_new" || type === "notification.added_to_channel") && channel) {
         return await this.upsertChannelData({ channel, execute });
       }
@@ -17066,6 +17367,12 @@ var AbstractOfflineDB = class {
         if (task.type === "delete-reaction") {
           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;