stream-chat 9.6.1 → 9.8.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,
@@ -238,12 +239,16 @@ __export(index_exports, {
   calculateLevenshtein: () => calculateLevenshtein,
   channelManagerEventToHandlerMapping: () => channelManagerEventToHandlerMapping,
   chatCodes: () => chatCodes,
+  createActiveCommandGuardMiddleware: () => createActiveCommandGuardMiddleware,
   createAttachmentsCompositionMiddleware: () => createAttachmentsCompositionMiddleware,
+  createCommandInjectionMiddleware: () => createCommandInjectionMiddleware,
+  createCommandStringExtractionMiddleware: () => createCommandStringExtractionMiddleware,
   createCommandsMiddleware: () => createCommandsMiddleware,
   createCompositionDataCleanupMiddleware: () => createCompositionDataCleanupMiddleware,
   createCompositionValidationMiddleware: () => createCompositionValidationMiddleware,
   createCustomDataCompositionMiddleware: () => createCustomDataCompositionMiddleware,
   createDraftAttachmentsCompositionMiddleware: () => createDraftAttachmentsCompositionMiddleware,
+  createDraftCommandInjectionMiddleware: () => createDraftCommandInjectionMiddleware,
   createDraftCompositionValidationMiddleware: () => createDraftCompositionValidationMiddleware,
   createDraftCustomDataCompositionMiddleware: () => createDraftCustomDataCompositionMiddleware,
   createDraftLinkPreviewsCompositionMiddleware: () => createDraftLinkPreviewsCompositionMiddleware,
@@ -267,6 +272,7 @@ __export(index_exports, {
   formatMessage: () => formatMessage,
   generateFileName: () => generateFileName,
   getAttachmentTypeFromMimeType: () => getAttachmentTypeFromMimeType,
+  getCompleteCommandInString: () => getCompleteCommandInString,
   getExtensionFromMimeType: () => getExtensionFromMimeType,
   getTokenizedSuggestionDisplayName: () => getTokenizedSuggestionDisplayName,
   getTriggerCharWithToken: () => getTriggerCharWithToken,
@@ -2757,6 +2763,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.
@@ -6291,16 +6314,83 @@ var MessageDraftComposerMiddlewareExecutor = class extends MiddlewareExecutor {
   }
 };
 
+// src/messageComposer/middleware/messageComposer/commandInjection.ts
+var createCommandInjectionMiddleware = (composer) => ({
+  handlers: {
+    compose: ({
+      forward,
+      next,
+      state
+    }) => {
+      const command = composer.textComposer.command;
+      if (!command) {
+        return forward();
+      }
+      const { text } = state.localMessage;
+      const injection = `/${command?.name}`;
+      const enrichedText = `${injection} ${text}`;
+      return next({
+        ...state,
+        localMessage: {
+          ...state.localMessage,
+          text: enrichedText
+        },
+        message: {
+          ...state.message,
+          text: enrichedText
+        }
+      });
+    }
+  },
+  id: "stream-io/message-composer-middleware/command-string-injection"
+});
+var createDraftCommandInjectionMiddleware = (composer) => ({
+  handlers: {
+    compose: ({
+      forward,
+      next,
+      state
+    }) => {
+      const command = composer.textComposer.command;
+      if (!command) {
+        return forward();
+      }
+      const { text } = state.draft;
+      const injection = `/${command?.name}`;
+      const enrichedText = `${injection} ${text}`;
+      return next({
+        ...state,
+        draft: {
+          ...state.draft,
+          text: enrichedText
+        }
+      });
+    }
+  },
+  id: "stream-io/message-composer-middleware/draft-command-string-injection"
+});
+
+// src/messageComposer/middleware/textComposer/activeCommandGuard.ts
+var createActiveCommandGuardMiddleware = () => ({
+  handlers: {
+    onChange: ({ complete, forward, state }) => {
+      if (state.command) {
+        return complete(state);
+      }
+      return forward();
+    },
+    onSuggestionItemSelect: ({ forward }) => forward()
+  },
+  id: "stream-io/text-composer/active-command-guard"
+});
+
 // src/search/BaseSearchSource.ts
 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 +6404,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 +6466,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 +6474,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 +6525,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();
   }
 };
 
@@ -6648,6 +6787,11 @@ var getTriggerCharWithToken = ({
   );
   return match && match[match.length - 1].trim();
 };
+var getCompleteCommandInString = (text) => {
+  const match = text.match(/^\/(\S+)\s+.*/);
+  const commandName = match && match[1];
+  return commandName;
+};
 var insertItemWithTrigger = ({
   insertText,
   selection,
@@ -6697,7 +6841,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 +6885,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;
@@ -6764,9 +6908,21 @@ var createCommandsMiddleware = (channel, options) => {
     handlers: {
       onChange: ({ state, next, complete, forward }) => {
         if (!state.selection) return forward();
+        const finalText = state.text.slice(0, state.selection.end);
+        const commandName = getCompleteCommandInString(finalText);
+        if (commandName) {
+          const command = searchSource?.query(commandName).items[0];
+          if (command) {
+            return next({
+              ...state,
+              command,
+              suggestions: void 0
+            });
+          }
+        }
         const triggerWithToken = getTriggerCharWithToken({
           trigger: finalOptions.trigger,
-          text: state.text.slice(0, state.selection.end),
+          text: finalText,
           acceptTrailingSpaces: false,
           isCommand: true
         });
@@ -6785,6 +6941,7 @@ var createCommandsMiddleware = (channel, options) => {
         }
         return complete({
           ...state,
+          command: null,
           suggestions: {
             query: triggerWithToken.slice(1),
             searchSource,
@@ -6792,12 +6949,12 @@ var createCommandsMiddleware = (channel, options) => {
           }
         });
       },
-      onSuggestionItemSelect: ({ state, complete, forward }) => {
+      onSuggestionItemSelect: ({ state, next, forward }) => {
         const { selectedSuggestion } = state.change ?? {};
         if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
           return forward();
         searchSource.resetStateAndActivate();
-        return complete({
+        return next({
           ...state,
           ...insertItemWithTrigger({
             insertText: `/${selectedSuggestion.name} `,
@@ -6805,6 +6962,7 @@ var createCommandsMiddleware = (channel, options) => {
             text: state.text,
             trigger: finalOptions.trigger
           }),
+          command: selectedSuggestion,
           suggestions: void 0
         });
       }
@@ -6812,6 +6970,45 @@ var createCommandsMiddleware = (channel, options) => {
   };
 };
 
+// src/messageComposer/middleware/textComposer/commandStringExtraction.ts
+var stripCommandFromText = (text, commandName) => text.replace(new RegExp(`^${escapeRegExp(`/${commandName}`)}\\s*`), "");
+var createCommandStringExtractionMiddleware = () => ({
+  handlers: {
+    onChange: ({ complete, forward, state }) => {
+      const { command } = state;
+      if (!command?.name) {
+        return forward();
+      }
+      const newText = stripCommandFromText(state.text, command.name);
+      return complete({
+        ...state,
+        selection: {
+          end: newText.length,
+          start: newText.length
+        },
+        text: newText
+      });
+    },
+    onSuggestionItemSelect: ({ next, forward, state }) => {
+      const { command } = state;
+      if (!command) {
+        return forward();
+      }
+      const triggerWithCommand = `/${command?.name} `;
+      const newText = state.text.slice(triggerWithCommand.length);
+      return next({
+        ...state,
+        selection: {
+          end: newText.length,
+          start: newText.length
+        },
+        text: newText
+      });
+    }
+  },
+  id: "stream-io/text-composer/command-string-extraction"
+});
+
 // src/messageComposer/middleware/textComposer/mentions.ts
 var accentsMap = {
   a: "\xE1|\xE0|\xE3|\xE2|\xC0|\xC1|\xC3|\xC2",
@@ -7144,6 +7341,7 @@ var initState4 = ({
   if (!message) {
     const text2 = composer.config.text.defaultValue ?? "";
     return {
+      command: null,
       mentionedUsers: [],
       text: text2,
       selection: { start: text2.length, end: text2.length }
@@ -7182,6 +7380,10 @@ var TextComposer = class {
       mentionedUsers.splice(existingUserIndex, 1);
       this.state.partialNext({ mentionedUsers });
     };
+    this.setCommand = (command) => {
+      if (command?.name === this.command?.name) return;
+      this.state.partialNext({ command });
+    };
     this.setText = (text) => {
       if (!this.enabled || text === this.text) return;
       this.state.partialNext({ text });
@@ -7191,7 +7393,10 @@ var TextComposer = class {
       if (!this.enabled || !selectionChanged) return;
       this.state.partialNext({ selection });
     };
-    this.insertText = ({ text, selection }) => {
+    this.insertText = async ({
+      text,
+      selection
+    }) => {
       if (!this.enabled) return;
       const finalSelection = selection ?? this.selection;
       const { maxLengthOnEdit } = this.composer.config.text ?? {};
@@ -7207,7 +7412,7 @@ var TextComposer = class {
       );
       const expectedCursorPosition = currentText.slice(0, finalSelection.start).length + text.length;
       const cursorPosition = expectedCursorPosition >= finalText.length ? finalText.length : currentText.slice(0, expectedCursorPosition).length;
-      this.state.partialNext({
+      await this.handleChange({
         text: finalText,
         selection: {
           start: cursorPosition,
@@ -7327,6 +7532,9 @@ var TextComposer = class {
     this.composer.updateConfig({ text: { publishTypingEvents } });
   }
   // --- START STATE API ---
+  get command() {
+    return this.state.getLatestValue().command;
+  }
   get mentionedUsers() {
     return this.state.getLatestValue().mentionedUsers;
   }
@@ -7345,6 +7553,9 @@ var TextComposer = class {
   setMentionedUsers(users) {
     this.state.partialNext({ mentionedUsers: users });
   }
+  clearCommand() {
+    this.state.partialNext({ command: null });
+  }
   // --- END TEXT PROCESSING ----
 };
 
@@ -7902,7 +8113,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 +8204,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 +8274,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 +8287,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 +8366,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 +8566,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 +8884,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 +9747,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 +9874,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 +9887,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
    *
@@ -12744,6 +13116,20 @@ var ReminderPaginator = class extends BasePaginator {
     this.filterQueryResults = (items) => items;
     this.client = client;
   }
+  get filters() {
+    return this._filters;
+  }
+  get sort() {
+    return this._sort;
+  }
+  set filters(filters) {
+    this._filters = filters;
+    this.resetState();
+  }
+  set sort(sort) {
+    this._sort = sort;
+    this.resetState();
+  }
 };
 
 // src/reminders/ReminderManager.ts
@@ -12758,7 +13144,8 @@ var DEFAULT_REMINDER_MANAGER_CONFIG = {
     2 * oneHour2,
     8 * oneHour2,
     oneDay2
-  ]
+  ],
+  stopTimerRefreshBoundaryMs: DEFAULT_STOP_REFRESH_BOUNDARY_MS
 };
 var isReminderExistsError = (error) => error.message.match("already has reminder created for this message_id");
 var isReminderDoesNotExistError = (error) => error.message.match("reminder does not exist");
@@ -12909,13 +13296,19 @@ var _ReminderManager = class _ReminderManager extends WithSubscriptions {
     };
     this.client = client;
     this.configState = new StateStore({
-      scheduledOffsetsMs: config?.scheduledOffsetsMs ?? DEFAULT_REMINDER_MANAGER_CONFIG.scheduledOffsetsMs
+      scheduledOffsetsMs: config?.scheduledOffsetsMs ?? DEFAULT_REMINDER_MANAGER_CONFIG.scheduledOffsetsMs,
+      stopTimerRefreshBoundaryMs: config?.stopTimerRefreshBoundaryMs ?? DEFAULT_REMINDER_MANAGER_CONFIG.stopTimerRefreshBoundaryMs
     });
     this.state = new StateStore({ reminders: /* @__PURE__ */ new Map() });
     this.paginator = new ReminderPaginator(client);
   }
   // Config API START //
   updateConfig(config) {
+    if (typeof config.stopTimerRefreshBoundaryMs === "number" && config.stopTimerRefreshBoundaryMs !== this.stopTimerRefreshBoundaryMs) {
+      this.reminders.forEach((reminder) => {
+        reminder.timer.stopRefreshBoundaryMs = config?.stopTimerRefreshBoundaryMs;
+      });
+    }
     this.configState.partialNext(config);
   }
   get stopTimerRefreshBoundaryMs() {
@@ -14240,9 +14633,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 +15550,7 @@ var StreamChat = class _StreamChat {
     if (this.userAgent) {
       return this.userAgent;
     }
-    const version = "9.6.1";
+    const version = "9.8.0";
     const clientBundle = "browser-cjs";
     let userAgentString = "";
     if (this.sdkIdentifier) {
@@ -16248,6 +16639,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 +17393,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 +17458,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 +17535,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;