stream-chat 4.4.3 → 5.1.0

package/src/client.ts

@@ -11,6 +11,8 @@ import { StableWSConnection } from './connection';
 import { isValidEventType } from './events';
 import { JWTUserToken, DevToken, CheckSignature } from './signing';
 import { TokenManager } from './token_manager';
+import { WSConnectionFallback } from './connection_fallback';
+import { isWSFailure } from './errors';
 import {
   isFunction,
   isOwnUserBaseProperty,
@@ -20,6 +22,7 @@ import {
   randomId,
   sleep,
   retryInterval,
+  isOnline,
 } from './utils';
 
 import {
@@ -45,7 +48,6 @@ import {
   CheckSQSResponse,
   Configs,
   ConnectAPIResponse,
-  ConnectionChangeEvent,
   CreateChannelOptions,
   CreateChannelResponse,
   CreateCommandOptions,
@@ -95,7 +97,7 @@ import {
   TestSQSDataInput,
   TokenOrProvider,
   UnBanUserOptions,
-  UnknownType,
+  UR,
   UpdateChannelOptions,
   UpdateChannelResponse,
   UpdateCommandOptions,
@@ -117,6 +119,12 @@ import {
   DeleteUserOptions,
   DeleteChannelsResponse,
   TaskResponse,
+  ReservedMessageFields,
+  ReviewFlagReportResponse,
+  FlagReportsFilters,
+  FlagReportsResponse,
+  ReviewFlagReportOptions,
+  FlagReportsPaginationOptions,
 } from './types';
 import { InsightMetrics, postInsights } from './insights';
 
@@ -125,27 +133,19 @@ function isString(x: unknown): x is string {
 }
 
 export class StreamChat<
-  AttachmentType extends UnknownType = UnknownType,
-  ChannelType extends UnknownType = UnknownType,
+  AttachmentType extends UR = UR,
+  ChannelType extends UR = UR,
   CommandType extends string = LiteralStringForUnion,
-  EventType extends UnknownType = UnknownType,
-  MessageType extends UnknownType = UnknownType,
-  ReactionType extends UnknownType = UnknownType,
-  UserType extends UnknownType = UnknownType
+  EventType extends UR = UR,
+  MessageType extends UR = UR,
+  ReactionType extends UR = UR,
+  UserType extends UR = UR
 > {
   private static _instance?: unknown | StreamChat; // type is undefined|StreamChat, unknown is due to TS limitations with statics
 
   _user?: OwnUserResponse<ChannelType, CommandType, UserType> | UserResponse<UserType>;
   activeChannels: {
-    [key: string]: Channel<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      EventType,
-      MessageType,
-      ReactionType,
-      UserType
-    >;
+    [key: string]: Channel<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>;
   };
   anonymous: boolean;
   axiosInstance: AxiosInstance;
@@ -154,22 +154,10 @@ export class StreamChat<
   cleaningIntervalRef?: NodeJS.Timeout;
   clientID?: string;
   configs: Configs<CommandType>;
-  connectionID?: string;
-  failures?: number;
   key: string;
   listeners: {
     [key: string]: Array<
-      (
-        event: Event<
-          AttachmentType,
-          ChannelType,
-          CommandType,
-          EventType,
-          MessageType,
-          ReactionType,
-          UserType
-        >,
-      ) => void
+      (event: Event<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>) => void
     >;
   };
   logger: Logger;
@@ -195,10 +183,29 @@ export class StreamChat<
   userAgent?: string;
   userID?: string;
   wsBaseURL?: string;
-  wsConnection: StableWSConnection<ChannelType, CommandType, UserType> | null;
+  wsConnection: StableWSConnection<
+    ChannelType,
+    CommandType,
+    UserType,
+    AttachmentType,
+    EventType,
+    MessageType,
+    ReactionType
+  > | null;
+  wsFallback?: WSConnectionFallback<
+    AttachmentType,
+    ChannelType,
+    CommandType,
+    EventType,
+    MessageType,
+    ReactionType,
+    UserType
+  >;
   wsPromise: ConnectAPIResponse<ChannelType, CommandType, UserType> | null;
   consecutiveFailures: number;
   insightMetrics: InsightMetrics;
+  defaultWSTimeoutWithFallback: number;
+  defaultWSTimeout: number;
 
   /**
    * Initialize a client
@@ -221,11 +228,7 @@ export class StreamChat<
    */
   constructor(key: string, options?: StreamChatOptions);
   constructor(key: string, secret?: string, options?: StreamChatOptions);
-  constructor(
-    key: string,
-    secretOrOptions?: StreamChatOptions | string,
-    options?: StreamChatOptions,
-  ) {
+  constructor(key: string, secretOrOptions?: StreamChatOptions | string, options?: StreamChatOptions) {
     // set the key
     this.key = key;
     this.listeners = {};
@@ -240,16 +243,9 @@ export class StreamChat<
     }
 
     // set the options... and figure out defaults...
-    const inputOptions = options
-      ? options
-      : secretOrOptions && !isString(secretOrOptions)
-      ? secretOrOptions
-      : {};
-
-    this.browser =
-      typeof inputOptions.browser !== 'undefined'
-        ? inputOptions.browser
-        : typeof window !== 'undefined';
+    const inputOptions = options ? options : secretOrOptions && !isString(secretOrOptions) ? secretOrOptions : {};
+
+    this.browser = typeof inputOptions.browser !== 'undefined' ? inputOptions.browser : typeof window !== 'undefined';
     this.node = !this.browser;
 
     this.options = {
@@ -295,6 +291,9 @@ export class StreamChat<
     this.consecutiveFailures = 0;
     this.insightMetrics = new InsightMetrics();
 
+    this.defaultWSTimeoutWithFallback = 6000;
+    this.defaultWSTimeout = 15000;
+
     /**
      * logger function should accept 3 parameters:
      * @param logLevel string
@@ -370,67 +369,43 @@ export class StreamChat<
    * StreamChat.getInstance('api_key', "secret", { httpsAgent: customAgent })
    */
   public static getInstance<
-    AttachmentType extends UnknownType = UnknownType,
-    ChannelType extends UnknownType = UnknownType,
+    AttachmentType extends UR = UR,
+    ChannelType extends UR = UR,
     CommandType extends string = LiteralStringForUnion,
-    EventType extends UnknownType = UnknownType,
-    MessageType extends UnknownType = UnknownType,
-    ReactionType extends UnknownType = UnknownType,
-    UserType extends UnknownType = UnknownType
+    EventType extends UR = UR,
+    MessageType extends UR = UR,
+    ReactionType extends UR = UR,
+    UserType extends UR = UR
   >(
     key: string,
     options?: StreamChatOptions,
-  ): StreamChat<
-    AttachmentType,
-    ChannelType,
-    CommandType,
-    EventType,
-    MessageType,
-    ReactionType,
-    UserType
-  >;
+  ): StreamChat<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>;
   public static getInstance<
-    AttachmentType extends UnknownType = UnknownType,
-    ChannelType extends UnknownType = UnknownType,
+    AttachmentType extends UR = UR,
+    ChannelType extends UR = UR,
     CommandType extends string = LiteralStringForUnion,
-    EventType extends UnknownType = UnknownType,
-    MessageType extends UnknownType = UnknownType,
-    ReactionType extends UnknownType = UnknownType,
-    UserType extends UnknownType = UnknownType
+    EventType extends UR = UR,
+    MessageType extends UR = UR,
+    ReactionType extends UR = UR,
+    UserType extends UR = UR
   >(
     key: string,
     secret?: string,
     options?: StreamChatOptions,
-  ): StreamChat<
-    AttachmentType,
-    ChannelType,
-    CommandType,
-    EventType,
-    MessageType,
-    ReactionType,
-    UserType
-  >;
+  ): StreamChat<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>;
   public static getInstance<
-    AttachmentType extends UnknownType = UnknownType,
-    ChannelType extends UnknownType = UnknownType,
+    AttachmentType extends UR = UR,
+    ChannelType extends UR = UR,
     CommandType extends string = LiteralStringForUnion,
-    EventType extends UnknownType = UnknownType,
-    MessageType extends UnknownType = UnknownType,
-    ReactionType extends UnknownType = UnknownType,
-    UserType extends UnknownType = UnknownType
+    EventType extends UR = UR,
+    MessageType extends UR = UR,
+    ReactionType extends UR = UR,
+    UserType extends UR = UR
   >(
     key: string,
     secretOrOptions?: StreamChatOptions | string,
     options?: StreamChatOptions,
-  ): StreamChat<
-    AttachmentType,
-    ChannelType,
-    CommandType,
-    EventType,
-    MessageType,
-    ReactionType,
-    UserType
-  > {
+  ): StreamChat<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType> {
     if (!StreamChat._instance) {
       if (typeof secretOrOptions === 'string') {
         StreamChat._instance = new StreamChat<
@@ -479,7 +454,9 @@ export class StreamChat<
     this.wsBaseURL = this.baseURL.replace('http', 'ws').replace(':3030', ':8800');
   }
 
-  _hasConnectionID = () => Boolean(this.wsConnection?.connectionID);
+  _getConnectionID = () => this.wsConnection?.connectionID || this.wsFallback?.connectionID;
+
+  _hasConnectionID = () => Boolean(this._getConnectionID());
 
   /**
    * connectUser - Set the current user and open a WebSocket connection
@@ -514,10 +491,7 @@ export class StreamChat<
       );
     }
 
-    if (
-      (this._isUsingServerAuth() || this.node) &&
-      !this.options.allowServerSideConnect
-    ) {
+    if ((this._isUsingServerAuth() || this.node) && !this.options.allowServerSideConnect) {
       console.warn(
         'Please do not use connectUser server side. connectUser impacts MAU and concurrent connection usage and thus your bill. If you have a valid use-case, add "allowServerSideConnect: true" to the client options to disable this warning.',
       );
@@ -560,9 +534,7 @@ export class StreamChat<
   _setToken = (user: UserResponse<UserType>, userTokenOrProvider: TokenOrProvider) =>
     this.tokenManager.setTokenOrProvider(userTokenOrProvider, user);
 
-  _setUser(
-    user: OwnUserResponse<ChannelType, CommandType, UserType> | UserResponse<UserType>,
-  ) {
+  _setUser(user: OwnUserResponse<ChannelType, CommandType, UserType> | UserResponse<UserType>) {
     /**
      * This one is used by the frontend. This is a copy of the current user object stored on backend.
      * It contains reserved properties and own user properties which are not present in `this._user`.
@@ -585,17 +557,14 @@ export class StreamChat<
    * @param timeout Max number of ms, to wait for close event of websocket, before forcefully assuming succesful disconnection.
    *                https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
    */
-  closeConnection = (timeout?: number) => {
+  closeConnection = async (timeout?: number) => {
     if (this.cleaningIntervalRef != null) {
       clearInterval(this.cleaningIntervalRef);
       this.cleaningIntervalRef = undefined;
     }
 
-    if (!this.wsConnection) {
-      return Promise.resolve();
-    }
-
-    return this.wsConnection.disconnect(timeout);
+    await Promise.all([this.wsConnection?.disconnect(timeout), this.wsFallback?.disconnect(timeout)]);
+    return Promise.resolve();
   };
 
   /**
@@ -603,19 +572,13 @@ export class StreamChat<
    */
   openConnection = async () => {
     if (!this.userID) {
-      throw Error(
-        'User is not set on client, use client.connectUser or client.connectAnonymousUser instead',
-      );
+      throw Error('User is not set on client, use client.connectUser or client.connectAnonymousUser instead');
     }
 
-    if (this.wsConnection?.isHealthy && this._hasConnectionID()) {
-      this.logger(
-        'info',
-        'client:openConnection() - openConnection called twice, healthy connection already exists',
-        {
-          tags: ['connection', 'client'],
-        },
-      );
+    if ((this.wsConnection?.isHealthy || this.wsFallback?.isHealthy()) && this._hasConnectionID()) {
+      this.logger('info', 'client:openConnection() - openConnection called twice, healthy connection already exists', {
+        tags: ['connection', 'client'],
+      });
 
       return Promise.resolve();
     }
@@ -661,9 +624,7 @@ export class StreamChat<
 	 */
   async updateAppSettings(options: AppSettings) {
     if (options.apn_config?.p12_cert) {
-      options.apn_config.p12_cert = Buffer.from(options.apn_config.p12_cert).toString(
-        'base64',
-      );
+      options.apn_config.p12_cert = Buffer.from(options.apn_config.p12_cert).toString('base64');
     }
     return await this.patch<APIResponse>(this.baseURL + '/app', options);
   }
@@ -674,9 +635,7 @@ export class StreamChat<
     }
 
     if (before === '') {
-      throw new Error(
-        "Don't pass blank string for since, use null instead if resetting the token revoke",
-      );
+      throw new Error("Don't pass blank string for since, use null instead if resetting the token revoke");
     }
 
     return before;
@@ -748,12 +707,8 @@ export class StreamChat<
       ...(data.messageID ? { message_id: data.messageID } : {}),
       ...(data.apnTemplate ? { apn_template: data.apnTemplate } : {}),
       ...(data.firebaseTemplate ? { firebase_template: data.firebaseTemplate } : {}),
-      ...(data.firebaseDataTemplate
-        ? { firebase_data_template: data.firebaseDataTemplate }
-        : {}),
-      ...(data.huaweiDataTemplate
-        ? { huawei_data_template: data.huaweiDataTemplate }
-        : {}),
+      ...(data.firebaseDataTemplate ? { firebase_data_template: data.firebaseDataTemplate } : {}),
+      ...(data.huaweiDataTemplate ? { huawei_data_template: data.huaweiDataTemplate } : {}),
       ...(data.skipDevices ? { skip_devices: true } : {}),
     });
   }
@@ -801,7 +756,7 @@ export class StreamChat<
     // reset client state
     this.state = new ClientState();
     // reset token manager
-    this.tokenManager.reset();
+    setTimeout(this.tokenManager.reset); // delay reseting to use token for disconnect calls
 
     // close the WS connection
     return closePromise;
@@ -819,10 +774,7 @@ export class StreamChat<
    * connectAnonymousUser - Set an anonymous user and open a WebSocket connection
    */
   connectAnonymousUser = () => {
-    if (
-      (this._isUsingServerAuth() || this.node) &&
-      !this.options.allowServerSideConnect
-    ) {
+    if ((this._isUsingServerAuth() || this.node) && !this.options.allowServerSideConnect) {
       console.warn(
         'Please do not use connectUser server side. connectUser impacts MAU and concurrent connection usage and thus your bill. If you have a valid use-case, add "allowServerSideConnect: true" to the client options to disable this warning.',
       );
@@ -857,9 +809,10 @@ export class StreamChat<
     let response: { access_token: string; user: UserResponse<UserType> } | undefined;
     this.anonymous = true;
     try {
-      response = await this.post<
-        APIResponse & { access_token: string; user: UserResponse<UserType> }
-      >(this.baseURL + '/guest', { user });
+      response = await this.post<APIResponse & { access_token: string; user: UserResponse<UserType> }>(
+        this.baseURL + '/guest',
+        { user },
+      );
     } catch (e) {
       this.anonymous = false;
       throw e;
@@ -867,10 +820,7 @@ export class StreamChat<
     this.anonymous = false;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { created_at, updated_at, last_active, online, ...guestUser } = response.user;
-    return await this.connectUser(
-      guestUser as UserResponse<UserType>,
-      response.access_token,
-    );
+    return await this.connectUser(guestUser as UserResponse<UserType>, response.access_token);
   }
 
   /**
@@ -912,39 +862,15 @@ export class StreamChat<
    * @return {{ unsubscribe: () => void }} Description
    */
   on(
-    callback: EventHandler<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      EventType,
-      MessageType,
-      ReactionType,
-      UserType
-    >,
+    callback: EventHandler<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>,
   ): { unsubscribe: () => void };
   on(
     eventType: string,
-    callback: EventHandler<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      EventType,
-      MessageType,
-      ReactionType,
-      UserType
-    >,
+    callback: EventHandler<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>,
   ): { unsubscribe: () => void };
   on(
     callbackOrString:
-      | EventHandler<
-          AttachmentType,
-          ChannelType,
-          CommandType,
-          EventType,
-          MessageType,
-          ReactionType,
-          UserType
-        >
+      | EventHandler<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>
       | string,
     callbackOrNothing?: EventHandler<
       AttachmentType,
@@ -995,39 +921,15 @@ export class StreamChat<
    *
    */
   off(
-    callback: EventHandler<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      EventType,
-      MessageType,
-      ReactionType,
-      UserType
-    >,
+    callback: EventHandler<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>,
   ): void;
   off(
     eventType: string,
-    callback: EventHandler<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      EventType,
-      MessageType,
-      ReactionType,
-      UserType
-    >,
+    callback: EventHandler<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>,
   ): void;
   off(
     callbackOrString:
-      | EventHandler<
-          AttachmentType,
-          ChannelType,
-          CommandType,
-          EventType,
-          MessageType,
-          ReactionType,
-          UserType
-        >
+      | EventHandler<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>
       | string,
     callbackOrNothing?: EventHandler<
       AttachmentType,
@@ -1082,15 +984,11 @@ export class StreamChat<
   }
 
   _logApiResponse<T>(type: string, url: string, response: AxiosResponse<T>) {
-    this.logger(
-      'info',
-      `client:${type} - Response - url: ${url} > status ${response.status}`,
-      {
-        tags: ['api', 'api_response', 'client'],
-        url,
-        response,
-      },
-    );
+    this.logger('info', `client:${type} - Response - url: ${url} > status ${response.status}`, {
+      tags: ['api', 'api_response', 'client'],
+      url,
+      response,
+    });
   }
 
   _logApiError(type: string, url: string, error: unknown) {
@@ -1139,15 +1037,14 @@ export class StreamChat<
       this._logApiResponse<T>(type, url, response);
       this.consecutiveFailures = 0;
       return this.handleResponse(response);
-    } catch (e) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (e: any /**TODO: generalize error types  */) {
       e.client_request_id = requestConfig.headers?.['x-client-request-id'];
       this._logApiError(type, url, e);
       this.consecutiveFailures += 1;
       if (e.response) {
-        if (
-          e.response.data.code === chatCodes.TOKEN_EXPIRED &&
-          !this.tokenManager.isStatic()
-        ) {
+        /** connection_fallback depends on this token expiration logic */
+        if (e.response.data.code === chatCodes.TOKEN_EXPIRED && !this.tokenManager.isStatic()) {
           if (this.consecutiveFailures > 1) {
             await sleep(retryInterval(this.consecutiveFailures));
           }
@@ -1205,9 +1102,7 @@ export class StreamChat<
     let err: Error & { code?: number; response?: AxiosResponse<T>; status?: number };
     err = new Error(`StreamChat error HTTP code: ${response.status}`);
     if (response.data && response.data.code) {
-      err = new Error(
-        `StreamChat error code ${response.data.code}: ${response.data.message}`,
-      );
+      err = new Error(`StreamChat error code ${response.data.code}: ${response.data.message}`);
       err.code = response.data.code;
     }
     err.response = response;
@@ -1224,16 +1119,10 @@ export class StreamChat<
   }
 
   dispatchEvent = (
-    event: Event<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      EventType,
-      MessageType,
-      ReactionType,
-      UserType
-    >,
+    event: Event<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>,
   ) => {
+    if (!event.received_at) event.received_at = new Date();
+
     // client event handlers
     const postListenerCallbacks = this._handleClientEvent(event);
 
@@ -1265,7 +1154,6 @@ export class StreamChat<
       ReactionType,
       UserType
     >;
-    event.received_at = new Date();
     this.dispatchEvent(event);
   };
 
@@ -1350,15 +1238,7 @@ export class StreamChat<
    * @param {Event} event
    */
   _handleUserEvent = (
-    event: Event<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      EventType,
-      MessageType,
-      ReactionType,
-      UserType
-    >,
+    event: Event<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>,
   ) => {
     if (!event.user) {
       return;
@@ -1400,42 +1280,22 @@ export class StreamChat<
       this._updateUserMessageReferences(event.user);
     }
 
-    if (
-      event.type === 'user.deleted' &&
-      event.user.deleted_at &&
-      (event.mark_messages_deleted || event.hard_delete)
-    ) {
+    if (event.type === 'user.deleted' && event.user.deleted_at && (event.mark_messages_deleted || event.hard_delete)) {
       this._deleteUserMessageReference(event.user, event.hard_delete);
     }
   };
 
   _handleClientEvent(
-    event: Event<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      EventType,
-      MessageType,
-      ReactionType,
-      UserType
-    >,
+    event: Event<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>,
   ) {
     const client = this;
     const postListenerCallbacks = [];
-    this.logger(
-      'info',
-      `client:_handleClientEvent - Received event of type { ${event.type} }`,
-      {
-        tags: ['event', 'client'],
-        event,
-      },
-    );
+    this.logger('info', `client:_handleClientEvent - Received event of type { ${event.type} }`, {
+      tags: ['event', 'client'],
+      event,
+    });
 
-    if (
-      event.type === 'user.presence.changed' ||
-      event.type === 'user.updated' ||
-      event.type === 'user.deleted'
-    ) {
+    if (event.type === 'user.presence.changed' || event.type === 'user.updated' || event.type === 'user.deleted') {
       this._handleUserEvent(event);
     }
 
@@ -1454,12 +1314,8 @@ export class StreamChat<
       const currentMutedChannelIds: string[] = [];
       const nextMutedChannelIds: string[] = [];
 
-      this.mutedChannels.forEach(
-        (mute) => mute.channel && currentMutedChannelIds.push(mute.channel.cid),
-      );
-      event.me.channel_mutes.forEach(
-        (mute) => mute.channel && nextMutedChannelIds.push(mute.channel.cid),
-      );
+      this.mutedChannels.forEach((mute) => mute.channel && currentMutedChannelIds.push(mute.channel.cid));
+      event.me.channel_mutes.forEach((mute) => mute.channel && nextMutedChannelIds.push(mute.channel.cid));
 
       /** Set the unread count of un-muted channels to 0, which is the behaviour of backend */
       currentMutedChannelIds.forEach((cid) => {
@@ -1475,11 +1331,7 @@ export class StreamChat<
       this.mutedUsers = event.me.mutes;
     }
 
-    if (
-      (event.type === 'channel.deleted' ||
-        event.type === 'notification.channel_deleted') &&
-      event.cid
-    ) {
+    if ((event.type === 'channel.deleted' || event.type === 'notification.channel_deleted') && event.cid) {
       client.state.deleteAllChannelReference(event.cid);
       this.activeChannels[event.cid]?._disconnect();
 
@@ -1499,9 +1351,7 @@ export class StreamChat<
       const mute = this.mutedChannels[i];
       if (mute.channel?.cid === cid) {
         muteStatus = {
-          muted: mute.expires
-            ? new Date(mute.expires).getTime() > new Date().getTime()
-            : true,
+          muted: mute.expires ? new Date(mute.expires).getTime() > new Date().getTime() : true,
           createdAt: mute.created_at ? new Date(mute.created_at) : new Date(),
           expiresAt: mute.expires ? new Date(mute.expires) : null,
         };
@@ -1521,30 +1371,12 @@ export class StreamChat<
   }
 
   _callClientListeners = (
-    event: Event<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      EventType,
-      MessageType,
-      ReactionType,
-      UserType
-    >,
+    event: Event<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>,
   ) => {
     const client = this;
     // gather and call the listeners
     const listeners: Array<
-      (
-        event: Event<
-          AttachmentType,
-          ChannelType,
-          CommandType,
-          EventType,
-          MessageType,
-          ReactionType,
-          UserType
-        >,
-      ) => void
+      (event: Event<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>) => void
     > = [];
     if (client.listeners.all) {
       listeners.push(...client.listeners.all);
@@ -1560,21 +1392,15 @@ export class StreamChat<
   };
 
   recoverState = async () => {
-    this.logger(
-      'info',
-      `client:recoverState() - Start of recoverState with connectionID ${this.wsConnection?.connectionID}`,
-      {
-        tags: ['connection'],
-      },
-    );
+    this.logger('info', `client:recoverState() - Start of recoverState with connectionID ${this._getConnectionID()}`, {
+      tags: ['connection'],
+    });
 
     const cids = Object.keys(this.activeChannels);
     if (cids.length && this.recoverStateOnReconnect) {
-      this.logger(
-        'info',
-        `client:recoverState() - Start the querying of ${cids.length} channels`,
-        { tags: ['connection', 'client'] },
-      );
+      this.logger('info', `client:recoverState() - Start the querying of ${cids.length} channels`, {
+        tags: ['connection', 'client'],
+      });
 
       await this.queryChannels(
         { cid: { $in: cids } } as ChannelFilters<ChannelType, CommandType, UserType>,
@@ -1603,20 +1429,13 @@ export class StreamChat<
    * @private
    */
   async connect() {
-    const client = this;
-    this.failures = 0;
-
-    if (client.userID == null || this._user == null) {
-      throw Error(
-        'Call connectUser or connectAnonymousUser before starting the connection',
-      );
+    if (!this.userID || !this._user) {
+      throw Error('Call connectUser or connectAnonymousUser before starting the connection');
     }
-
-    if (client.wsBaseURL == null) {
+    if (!this.wsBaseURL) {
       throw Error('Websocket base url not set');
     }
-
-    if (client.clientID == null) {
+    if (!this.clientID) {
       throw Error('clientID is not set');
     }
 
@@ -1625,25 +1444,50 @@ export class StreamChat<
     }
 
     // The StableWSConnection handles all the reconnection logic.
-    this.wsConnection = new StableWSConnection<ChannelType, CommandType, UserType>({
-      wsBaseURL: client.wsBaseURL,
-      enableInsights: this.options.enableInsights,
-      clientID: client.clientID,
-      userID: client.userID,
-      tokenManager: client.tokenManager,
-      user: this._user,
-      authType: this.getAuthType(),
-      userAgent: this.getUserAgent(),
-      apiKey: this.key,
-      recoverCallback: this.recoverState,
-      messageCallback: this.handleEvent,
-      eventCallback: this.dispatchEvent as (event: ConnectionChangeEvent) => void,
-      logger: this.logger,
-      device: this.options.device,
-      insightMetrics: this.insightMetrics,
-    });
+    this.wsConnection = new StableWSConnection<
+      ChannelType,
+      CommandType,
+      UserType,
+      AttachmentType,
+      EventType,
+      MessageType,
+      ReactionType
+    >({ client: this });
+
+    try {
+      // if fallback is used before, continue using it instead of waiting for WS to fail
+      if (this.wsFallback) {
+        return await this.wsFallback.connect();
+      }
 
-    return await this.wsConnection.connect();
+      // if WSFallback is enabled, ws connect should timeout faster so fallback can try
+      return await this.wsConnection.connect(
+        this.options.enableWSFallback ? this.defaultWSTimeoutWithFallback : this.defaultWSTimeout,
+      );
+    } catch (err) {
+      // run fallback only if it's WS/Network error and not a normal API error
+      // make sure browser is online before even trying the longpoll
+      if (this.options.enableWSFallback && isWSFailure(err) && isOnline()) {
+        this.logger('info', 'client:connect() - WS failed, fallback to longpoll', { tags: ['connection', 'client'] });
+        // @ts-expect-error
+        this.dispatchEvent({ type: 'transport.changed', mode: 'longpoll' });
+
+        this.wsConnection._destroyCurrentWSConnection();
+        this.wsConnection.disconnect().then(); // close WS so no retry
+        this.wsFallback = new WSConnectionFallback<
+          AttachmentType,
+          ChannelType,
+          CommandType,
+          EventType,
+          MessageType,
+          ReactionType,
+          UserType
+        >({ client: this });
+        return await this.wsFallback.connect();
+      }
+
+      throw err;
+    }
   }
 
   /**
@@ -1675,11 +1519,7 @@ export class StreamChat<
    *
    * @return {Promise<APIResponse & { users: Array<UserResponse<UserType>> }>} User Query Response
    */
-  async queryUsers(
-    filterConditions: UserFilters<UserType>,
-    sort: UserSort<UserType> = [],
-    options: UserOptions = {},
-  ) {
+  async queryUsers(filterConditions: UserFilters<UserType>, sort: UserSort<UserType> = [], options: UserOptions = {}) {
     const defaultOptions = {
       presence: false,
     };
@@ -1745,10 +1585,7 @@ export class StreamChat<
    *
    * @return {Promise<MessageFlagsResponse<ChannelType, CommandType, UserType>>} Message Flags Response
    */
-  async queryMessageFlags(
-    filterConditions: MessageFlagsFilters = {},
-    options: MessageFlagsPaginationOptions = {},
-  ) {
+  async queryMessageFlags(filterConditions: MessageFlagsFilters = {}, options: MessageFlagsPaginationOptions = {}) {
     // Return a list of message flags
     return await this.get<MessageFlagsResponse<ChannelType, CommandType, UserType>>(
       this.baseURL + '/moderation/flags/message',
@@ -1802,14 +1639,7 @@ export class StreamChat<
     };
 
     const data = await this.post<{
-      channels: ChannelAPIResponse<
-        AttachmentType,
-        ChannelType,
-        CommandType,
-        MessageType,
-        ReactionType,
-        UserType
-      >[];
+      channels: ChannelAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>[];
     }>(this.baseURL + '/channels', payload);
 
     const channels: Channel<
@@ -1855,34 +1685,16 @@ export class StreamChat<
    */
   async search(
     filterConditions: ChannelFilters<ChannelType, CommandType, UserType>,
-    query:
-      | string
-      | MessageFilters<
-          AttachmentType,
-          ChannelType,
-          CommandType,
-          MessageType,
-          ReactionType,
-          UserType
-        >,
+    query: string | MessageFilters<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>,
     options: SearchOptions<MessageType> = {},
   ) {
     if (options.offset && (options.sort || options.next)) {
       throw Error(`Cannot specify offset with sort or next parameters`);
     }
-    const payload: SearchPayload<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      MessageType,
-      ReactionType,
-      UserType
-    > = {
+    const payload: SearchPayload<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType> = {
       filter_conditions: filterConditions,
       ...options,
-      sort: options.sort
-        ? normalizeQuerySort<SearchMessageSortBase<MessageType>>(options.sort)
-        : undefined,
+      sort: options.sort ? normalizeQuerySort<SearchMessageSortBase<MessageType>>(options.sort) : undefined,
     };
     if (typeof query === 'string') {
       payload.query = query;
@@ -1896,14 +1708,7 @@ export class StreamChat<
     await this.setUserPromise;
 
     return await this.get<
-      SearchAPIResponse<
-        AttachmentType,
-        ChannelType,
-        CommandType,
-        MessageType,
-        ReactionType,
-        UserType
-      >
+      SearchAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>
     >(this.baseURL + '/search', {
       payload,
     });
@@ -1918,7 +1723,7 @@ export class StreamChat<
    *
    */
   setLocalDevice(device: BaseDeviceFields) {
-    if (this.wsConnection) {
+    if (this.wsConnection || this.wsFallback) {
       throw new Error('you can only set device before opening a websocket connection');
     }
 
@@ -1994,14 +1799,7 @@ export class StreamChat<
   }
 
   _addChannelConfig(
-    channelState: ChannelAPIResponse<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      MessageType,
-      ReactionType,
-      UserType
-    >,
+    channelState: ChannelAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>,
   ) {
     this.configs[channelState.channel.type] = channelState.channel.config;
   }
@@ -2024,27 +1822,11 @@ export class StreamChat<
     channelType: string,
     channelID?: string | null,
     custom?: ChannelData<ChannelType>,
-  ): Channel<
-    AttachmentType,
-    ChannelType,
-    CommandType,
-    EventType,
-    MessageType,
-    ReactionType,
-    UserType
-  >;
+  ): Channel<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>;
   channel(
     channelType: string,
     custom?: ChannelData<ChannelType>,
-  ): Channel<
-    AttachmentType,
-    ChannelType,
-    CommandType,
-    EventType,
-    MessageType,
-    ReactionType,
-    UserType
-  >;
+  ): Channel<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>;
   channel(
     channelType: string,
     channelIDOrCustom?: string | ChannelData<ChannelType> | null,
@@ -2062,15 +1844,12 @@ export class StreamChat<
     // support channel("messaging", undefined, {options})
     // support channel("messaging", "", {options})
     if (channelIDOrCustom == null || channelIDOrCustom === '') {
-      return new Channel<
-        AttachmentType,
-        ChannelType,
-        CommandType,
-        EventType,
-        MessageType,
-        ReactionType,
-        UserType
-      >(this, channelType, undefined, custom);
+      return new Channel<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>(
+        this,
+        channelType,
+        undefined,
+        custom,
+      );
     }
 
     // support channel("messaging", {options})
@@ -2123,9 +1902,7 @@ export class StreamChat<
       }
 
       if (key.indexOf(`${channelType}:!members-`) === 0) {
-        const membersStrInExistingChannel = Object.keys(channel.state.members)
-          .sort()
-          .join(',');
+        const membersStrInExistingChannel = Object.keys(channel.state.members).sort().join(',');
         if (membersStrInExistingChannel === membersStr) {
           return channel;
         }
@@ -2164,11 +1941,7 @@ export class StreamChat<
    *
    * @return {channel} The channel object, initialize it using channel.watch()
    */
-  getChannelById = (
-    channelType: string,
-    channelID: string,
-    custom: ChannelData<ChannelType>,
-  ) => {
+  getChannelById = (channelType: string, channelID: string, custom: ChannelData<ChannelType>) => {
     if (typeof channelID === 'string' && ~channelID.indexOf(':')) {
       throw Error(`Invalid channel id ${channelID}, can't contain the : character`);
     }
@@ -2316,10 +2089,7 @@ export class StreamChat<
     });
   }
 
-  async deactivateUser(
-    userID: string,
-    options?: { created_by_id?: string; mark_messages_deleted?: boolean },
-  ) {
+  async deactivateUser(userID: string, options?: { created_by_id?: string; mark_messages_deleted?: boolean }) {
     return await this.post<APIResponse & { user: UserResponse<UserType> }>(
       this.baseURL + `/users/${userID}/deactivate`,
       {
@@ -2331,14 +2101,7 @@ export class StreamChat<
   async exportUser(userID: string, options?: Record<string, string>) {
     return await this.get<
       APIResponse & {
-        messages: MessageResponse<
-          AttachmentType,
-          ChannelType,
-          CommandType,
-          MessageType,
-          ReactionType,
-          UserType
-        >[];
+        messages: MessageResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>[];
         reactions: ReactionResponse<ReactionType, UserType>[];
         user: UserResponse<UserType>;
       }
@@ -2354,20 +2117,6 @@ export class StreamChat<
    * @returns {Promise<APIResponse>}
    */
   async banUser(targetUserID: string, options?: BanUserOptions<UserType>) {
-    if (options?.user_id !== undefined) {
-      options.banned_by_id = options.user_id;
-      delete options.user_id;
-      console.warn(
-        "banUser: 'user_id' is deprecated, please consider switching to 'banned_by_id'",
-      );
-    }
-    if (options?.user !== undefined) {
-      options.banned_by = options.user;
-      delete options.user;
-      console.warn(
-        "banUser: 'user' is deprecated, please consider switching to 'banned_by'",
-      );
-    }
     return await this.post<APIResponse>(this.baseURL + '/moderation/ban', {
       target_user_id: targetUserID,
       ...options,
@@ -2420,19 +2169,12 @@ export class StreamChat<
    * @param {MuteUserOptions<UserType>} [options]
    * @returns {Promise<MuteUserResponse<ChannelType, CommandType, UserType>>}
    */
-  async muteUser(
-    targetID: string,
-    userID?: string,
-    options: MuteUserOptions<UserType> = {},
-  ) {
-    return await this.post<MuteUserResponse<ChannelType, CommandType, UserType>>(
-      this.baseURL + '/moderation/mute',
-      {
-        target_id: targetID,
-        ...(userID ? { user_id: userID } : {}),
-        ...options,
-      },
-    );
+  async muteUser(targetID: string, userID?: string, options: MuteUserOptions<UserType> = {}) {
+    return await this.post<MuteUserResponse<ChannelType, CommandType, UserType>>(this.baseURL + '/moderation/mute', {
+      target_id: targetID,
+      ...(userID ? { user_id: userID } : {}),
+      ...options,
+    });
   }
 
   /** unmuteUser - unmutes a user
@@ -2471,13 +2213,10 @@ export class StreamChat<
    * @returns {Promise<APIResponse>}
    */
   async flagMessage(targetMessageID: string, options: { user_id?: string } = {}) {
-    return await this.post<FlagMessageResponse<UserType>>(
-      this.baseURL + '/moderation/flag',
-      {
-        target_message_id: targetMessageID,
-        ...options,
-      },
-    );
+    return await this.post<FlagMessageResponse<UserType>>(this.baseURL + '/moderation/flag', {
+      target_message_id: targetMessageID,
+      ...options,
+    });
   }
 
   /**
@@ -2487,13 +2226,10 @@ export class StreamChat<
    * @returns {Promise<APIResponse>}
    */
   async flagUser(targetID: string, options: { user_id?: string } = {}) {
-    return await this.post<FlagUserResponse<UserType>>(
-      this.baseURL + '/moderation/flag',
-      {
-        target_user_id: targetID,
-        ...options,
-      },
-    );
+    return await this.post<FlagUserResponse<UserType>>(this.baseURL + '/moderation/flag', {
+      target_user_id: targetID,
+      ...options,
+    });
   }
 
   /**
@@ -2503,13 +2239,10 @@ export class StreamChat<
    * @returns {Promise<APIResponse>}
    */
   async unflagMessage(targetMessageID: string, options: { user_id?: string } = {}) {
-    return await this.post<FlagMessageResponse<UserType>>(
-      this.baseURL + '/moderation/unflag',
-      {
-        target_message_id: targetMessageID,
-        ...options,
-      },
-    );
+    return await this.post<FlagMessageResponse<UserType>>(this.baseURL + '/moderation/unflag', {
+      target_message_id: targetMessageID,
+      ...options,
+    });
   }
 
   /**
@@ -2519,15 +2252,55 @@ export class StreamChat<
    * @returns {Promise<APIResponse>}
    */
   async unflagUser(targetID: string, options: { user_id?: string } = {}) {
-    return await this.post<FlagUserResponse<UserType>>(
-      this.baseURL + '/moderation/unflag',
+    return await this.post<FlagUserResponse<UserType>>(this.baseURL + '/moderation/unflag', {
+      target_user_id: targetID,
+      ...options,
+    });
+  }
+
+  /**
+   * _queryFlagReports - Query flag reports.
+   *
+   * Note: Do not use this.
+   * It is present for internal usage only.
+   * This function can, and will, break and/or be removed at any point in time.
+   *
+   * @param {FlagReportsFilters} filterConditions MongoDB style filter conditions
+   * @param {FlagReportsPaginationOptions} options Option object, {limit: 10, offset:0}
+   *
+   * @return {Promise<FlagReportsResponse<ChannelType, CommandType, UserType>>} Flag Reports Response
+   */
+  async _queryFlagReports(filterConditions: FlagReportsFilters = {}, options: FlagReportsPaginationOptions = {}) {
+    // Return a list of message flags
+    return await this.post<FlagReportsResponse<ChannelType, CommandType, UserType>>(
+      this.baseURL + '/moderation/reports',
       {
-        target_user_id: targetID,
+        filter_conditions: filterConditions,
         ...options,
       },
     );
   }
 
+  /**
+   * _reviewFlagReport - review flag report
+   *
+   * Note: Do not use this.
+   * It is present for internal usage only.
+   * This function can, and will, break and/or be removed at any point in time.
+   *
+   * @param {string} [id] flag report to review
+   * @param {string} [reviewResult] flag report review result
+   * @param {string} [options.user_id] currentUserID, only used with serverside auth
+   * @param {string} [options.review_details] custom information about review result
+   * @returns {Promise<ReviewFlagReportResponse>>}
+   */
+  async _reviewFlagReport(id: string, reviewResult: string, options: ReviewFlagReportOptions = {}) {
+    return await this.patch<ReviewFlagReportResponse<UserType>>(this.baseURL + `/moderation/reports/${id}`, {
+      review_result: reviewResult,
+      ...options,
+    });
+  }
+
   /**
    * @deprecated use markChannelsRead instead
    *
@@ -2553,10 +2326,7 @@ export class StreamChat<
   }
 
   createCommand(data: CreateCommandOptions<CommandType>) {
-    return this.post<CreateCommandResponse<CommandType>>(
-      this.baseURL + '/commands',
-      data,
-    );
+    return this.post<CreateCommandResponse<CommandType>>(this.baseURL + '/commands', data);
   }
 
   getCommand(name: string) {
@@ -2564,16 +2334,11 @@ export class StreamChat<
   }
 
   updateCommand(name: string, data: UpdateCommandOptions<CommandType>) {
-    return this.put<UpdateCommandResponse<CommandType>>(
-      this.baseURL + `/commands/${name}`,
-      data,
-    );
+    return this.put<UpdateCommandResponse<CommandType>>(this.baseURL + `/commands/${name}`, data);
   }
 
   deleteCommand(name: string) {
-    return this.delete<DeleteCommandResponse<CommandType>>(
-      this.baseURL + `/commands/${name}`,
-    );
+    return this.delete<DeleteCommandResponse<CommandType>>(this.baseURL + `/commands/${name}`);
   }
 
   listCommands() {
@@ -2582,23 +2347,15 @@ export class StreamChat<
 
   createChannelType(data: CreateChannelOptions<CommandType>) {
     const channelData = Object.assign({}, { commands: ['all'] }, data);
-    return this.post<CreateChannelResponse<CommandType>>(
-      this.baseURL + '/channeltypes',
-      channelData,
-    );
+    return this.post<CreateChannelResponse<CommandType>>(this.baseURL + '/channeltypes', channelData);
   }
 
   getChannelType(channelType: string) {
-    return this.get<GetChannelTypeResponse<CommandType>>(
-      this.baseURL + `/channeltypes/${channelType}`,
-    );
+    return this.get<GetChannelTypeResponse<CommandType>>(this.baseURL + `/channeltypes/${channelType}`);
   }
 
   updateChannelType(channelType: string, data: UpdateChannelOptions<CommandType>) {
-    return this.put<UpdateChannelResponse<CommandType>>(
-      this.baseURL + `/channeltypes/${channelType}`,
-      data,
-    );
+    return this.put<UpdateChannelResponse<CommandType>>(this.baseURL + `/channeltypes/${channelType}`, data);
   }
 
   deleteChannelType(channelType: string) {
@@ -2619,15 +2376,7 @@ export class StreamChat<
    */
   async translateMessage(messageId: string, language: string) {
     return await this.post<
-      APIResponse &
-        MessageResponse<
-          AttachmentType,
-          ChannelType,
-          CommandType,
-          MessageType,
-          ReactionType,
-          UserType
-        >
+      APIResponse & MessageResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>
     >(this.baseURL + `/messages/${messageId}/translate`, {
       language,
     });
@@ -2638,7 +2387,7 @@ export class StreamChat<
    * @param {undefined|null|number|string|Date} timeoutOrExpirationDate expiration date or timeout. Use number type to set timeout in seconds, string or Date to set exact expiration date
    */
   _normalizeExpiration(timeoutOrExpirationDate?: null | number | string | Date) {
-    let pinExpires: undefined | string;
+    let pinExpires: null | string = null;
     if (typeof timeoutOrExpirationDate === 'number') {
       const now = new Date();
       now.setSeconds(now.getSeconds() + timeoutOrExpirationDate);
@@ -2656,10 +2405,7 @@ export class StreamChat<
    * @param {string | { id: string }} messageOrMessageId message object or message id
    * @param {string} errorText error message to report in case of message id absence
    */
-  _validateAndGetMessageId(
-    messageOrMessageId: string | { id: string },
-    errorText: string,
-  ) {
+  _validateAndGetMessageId(messageOrMessageId: string | { id: string }, errorText: string) {
     let messageId: string;
     if (typeof messageOrMessageId === 'string') {
       messageId = messageOrMessageId;
@@ -2676,12 +2422,14 @@ export class StreamChat<
    * pinMessage - pins the message
    * @param {string | { id: string }} messageOrMessageId message object or message id
    * @param {undefined|null|number|string|Date} timeoutOrExpirationDate expiration date or timeout. Use number type to set timeout in seconds, string or Date to set exact expiration date
-   * @param {string | { id: string }} [userId]
+   * @param {undefined|string | { id: string }} [pinnedBy] who will appear as a user who pinned a message. Only for server-side use. Provide `undefined` when pinning message client-side
+   * @param {undefined|number|string|Date} pinnedAt date when message should be pinned. It affects the order of pinned messages. Use negative number to set relative time in the past, string or Date to set exact date of pin
    */
   pinMessage(
     messageOrMessageId: string | { id: string },
     timeoutOrExpirationDate?: null | number | string | Date,
-    userId?: string | { id: string },
+    pinnedBy?: string | { id: string },
+    pinnedAt?: number | string | Date,
   ) {
     const messageId = this._validateAndGetMessageId(
       messageOrMessageId,
@@ -2693,9 +2441,10 @@ export class StreamChat<
         set: {
           pinned: true,
           pin_expires: this._normalizeExpiration(timeoutOrExpirationDate),
+          pinned_at: this._normalizeExpiration(pinnedAt),
         },
       },
-      userId,
+      pinnedBy,
     );
   }
 
@@ -2704,10 +2453,7 @@ export class StreamChat<
    * @param {string | { id: string }} messageOrMessageId message object or message id
    * @param {string | { id: string }} [userId]
    */
-  unpinMessage(
-    messageOrMessageId: string | { id: string },
-    userId?: string | { id: string },
-  ) {
+  unpinMessage(messageOrMessageId: string | { id: string }, userId?: string | { id: string }) {
     const messageId = this._validateAndGetMessageId(
       messageOrMessageId,
       'Please specify the message id when calling unpinMessage',
@@ -2733,14 +2479,7 @@ export class StreamChat<
    * @return {APIResponse & { message: MessageResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType> }} Response that includes the message
    */
   async updateMessage(
-    message: UpdatedMessage<
-      AttachmentType,
-      ChannelType,
-      CommandType,
-      MessageType,
-      ReactionType,
-      UserType
-    >,
+    message: UpdatedMessage<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>,
     userId?: string | { id: string },
     options?: { skip_enrich_url?: boolean },
   ) {
@@ -2751,24 +2490,13 @@ export class StreamChat<
     const clonedMessage: Message = Object.assign({}, message);
     delete clonedMessage.id;
 
-    const reservedMessageFields: Array<
-      | 'command'
-      | 'created_at'
-      | 'html'
-      | 'latest_reactions'
-      | 'own_reactions'
-      | 'reaction_counts'
-      | 'reply_count'
-      | 'type'
-      | 'updated_at'
-      | 'user'
-      | '__html'
-    > = [
+    const reservedMessageFields: Array<ReservedMessageFields> = [
       'command',
       'created_at',
       'html',
       'latest_reactions',
       'own_reactions',
+      'quoted_message',
       'reaction_counts',
       'reply_count',
       'type',
@@ -2795,24 +2523,12 @@ export class StreamChat<
      * Server always expects mentioned_users to be array of string. We are adding extra check, just in case
      * SDK missed this conversion.
      */
-    if (
-      Array.isArray(clonedMessage.mentioned_users) &&
-      !isString(clonedMessage.mentioned_users[0])
-    ) {
-      clonedMessage.mentioned_users = clonedMessage.mentioned_users.map(
-        (mu) => ((mu as unknown) as UserResponse).id,
-      );
+    if (Array.isArray(clonedMessage.mentioned_users) && !isString(clonedMessage.mentioned_users[0])) {
+      clonedMessage.mentioned_users = clonedMessage.mentioned_users.map((mu) => ((mu as unknown) as UserResponse).id);
     }
 
     return await this.post<
-      UpdateMessageAPIResponse<
-        AttachmentType,
-        ChannelType,
-        CommandType,
-        MessageType,
-        ReactionType,
-        UserType
-      >
+      UpdateMessageAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>
     >(this.baseURL + `/messages/${message.id}`, {
       message: clonedMessage,
       ...options,
@@ -2846,14 +2562,7 @@ export class StreamChat<
       user = { id: userId };
     }
     return await this.put<
-      UpdateMessageAPIResponse<
-        AttachmentType,
-        ChannelType,
-        CommandType,
-        MessageType,
-        ReactionType,
-        UserType
-      >
+      UpdateMessageAPIResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>
     >(this.baseURL + `/messages/${id}`, {
       ...partialMessageObject,
       ...options,
@@ -2868,14 +2577,7 @@ export class StreamChat<
     }
     return await this.delete<
       APIResponse & {
-        message: MessageResponse<
-          AttachmentType,
-          ChannelType,
-          CommandType,
-          MessageType,
-          ReactionType,
-          UserType
-        >;
+        message: MessageResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>;
       }
     >(this.baseURL + `/messages/${messageID}`, params);
   }
@@ -2883,24 +2585,14 @@ export class StreamChat<
   async getMessage(messageID: string) {
     return await this.get<
       APIResponse & {
-        message: MessageResponse<
-          AttachmentType,
-          ChannelType,
-          CommandType,
-          MessageType,
-          ReactionType,
-          UserType
-        >;
+        message: MessageResponse<AttachmentType, ChannelType, CommandType, MessageType, ReactionType, UserType>;
       }
     >(this.baseURL + `/messages/${messageID}`);
   }
 
   getUserAgent() {
     return (
-      this.userAgent ||
-      `stream-chat-javascript-client-${this.node ? 'node' : 'browser'}-${
-        process.env.PKG_VERSION
-      }`
+      this.userAgent || `stream-chat-javascript-client-${this.node ? 'node' : 'browser'}-${process.env.PKG_VERSION}`
     );
   }
 
@@ -2919,8 +2611,9 @@ export class StreamChat<
       headers: {},
       config: {},
     },
-  ) {
+  ): AxiosRequestConfig {
     const token = this._getToken();
+    const authorization = token ? { Authorization: token } : undefined;
 
     if (!options.headers?.['x-client-request-id']) {
       options.headers = {
@@ -2932,12 +2625,12 @@ export class StreamChat<
     return {
       params: {
         user_id: this.userID,
-        ...options.params,
+        connection_id: this._getConnectionID(),
         api_key: this.key,
-        connection_id: this.wsConnection?.connectionID,
+        ...options.params,
       },
       headers: {
-        Authorization: token,
+        ...authorization,
         'stream-auth-type': this.getAuthType(),
         'X-Stream-Client': this.getUserAgent(),
         ...options.headers,
@@ -2965,6 +2658,20 @@ export class StreamChat<
     }, 500);
   }
 
+  /**
+   * encode ws url payload
+   * @private
+   * @returns json string
+   */
+  _buildWSPayload = (client_request_id?: string) => {
+    return JSON.stringify({
+      user_id: this.userID,
+      user_details: this._user,
+      device: this.options.device,
+      client_request_id,
+    });
+  };
+
   verifyWebhook(requestBody: string, xSignature: string) {
     return !!this.secret && CheckSignature(requestBody, this.secret, xSignature);
   }
@@ -3051,15 +2758,7 @@ export class StreamChat<
   sync(channel_cids: string[], last_sync_at: string) {
     return this.post<
       APIResponse & {
-        events: Event<
-          AttachmentType,
-          ChannelType,
-          CommandType,
-          EventType,
-          MessageType,
-          ReactionType,
-          UserType
-        >[];
+        events: Event<AttachmentType, ChannelType, CommandType, EventType, MessageType, ReactionType, UserType>[];
       }
     >(`${this.baseURL}/sync`, {
       channel_cids,
@@ -3086,15 +2785,11 @@ export class StreamChat<
   }
 
   listBlockLists() {
-    return this.get<APIResponse & { blocklists: BlockListResponse[] }>(
-      `${this.baseURL}/blocklists`,
-    );
+    return this.get<APIResponse & { blocklists: BlockListResponse[] }>(`${this.baseURL}/blocklists`);
   }
 
   getBlockList(name: string) {
-    return this.get<APIResponse & { blocklist: BlockListResponse }>(
-      `${this.baseURL}/blocklists/${name}`,
-    );
+    return this.get<APIResponse & { blocklist: BlockListResponse }>(`${this.baseURL}/blocklists/${name}`);
   }
 
   updateBlockList(name: string, data: { words: string[] }) {
@@ -3105,18 +2800,12 @@ export class StreamChat<
     return this.delete<APIResponse>(`${this.baseURL}/blocklists/${name}`);
   }
 
-  exportChannels(
-    request: Array<ExportChannelRequest>,
-    options: ExportChannelOptions = {},
-  ) {
+  exportChannels(request: Array<ExportChannelRequest>, options: ExportChannelOptions = {}) {
     const payload = {
       channels: request,
       ...options,
     };
-    return this.post<APIResponse & ExportChannelResponse>(
-      `${this.baseURL}/export_channels`,
-      payload,
-    );
+    return this.post<APIResponse & ExportChannelResponse>(`${this.baseURL}/export_channels`, payload);
   }
 
   exportChannel(request: ExportChannelRequest, options?: ExportChannelOptions) {
@@ -3124,9 +2813,7 @@ export class StreamChat<
   }
 
   getExportChannelStatus(id: string) {
-    return this.get<APIResponse & ExportChannelStatusResponse>(
-      `${this.baseURL}/export_channels/${id}`,
-    );
+    return this.get<APIResponse & ExportChannelStatusResponse>(`${this.baseURL}/export_channels/${id}`);
   }
 
   /**
@@ -3137,10 +2824,7 @@ export class StreamChat<
    * @return {Segment} The Created Segment
    */
   async createSegment(params: SegmentData) {
-    const { segment } = await this.post<{ segment: Segment }>(
-      this.baseURL + `/segments`,
-      { segment: params },
-    );
+    const { segment } = await this.post<{ segment: Segment }>(this.baseURL + `/segments`, { segment: params });
     return segment;
   }
 
@@ -3152,9 +2836,7 @@ export class StreamChat<
    * @return {Segment} A Segment
    */
   async getSegment(id: string) {
-    const { segment } = await this.get<{ segment: Segment }>(
-      this.baseURL + `/segments/${id}`,
-    );
+    const { segment } = await this.get<{ segment: Segment }>(this.baseURL + `/segments/${id}`);
     return segment;
   }
 
@@ -3165,10 +2847,7 @@ export class StreamChat<
    * @return {Segment[]} Segments
    */
   async listSegments(options: { limit?: number; offset?: number }) {
-    const { segments } = await this.get<{ segments: Segment[] }>(
-      this.baseURL + `/segments`,
-      options,
-    );
+    const { segments } = await this.get<{ segments: Segment[] }>(this.baseURL + `/segments`, options);
     return segments;
   }
 
@@ -3181,10 +2860,7 @@ export class StreamChat<
    * @return {Segment} Updated Segment
    */
   async updateSegment(id: string, params: Partial<SegmentData>) {
-    const { segment } = await this.put<{ segment: Segment }>(
-      this.baseURL + `/segments/${id}`,
-      { segment: params },
-    );
+    const { segment } = await this.put<{ segment: Segment }>(this.baseURL + `/segments/${id}`, { segment: params });
     return segment;
   }
 
@@ -3207,10 +2883,7 @@ export class StreamChat<
    * @return {Campaign} The Created Campaign
    */
   async createCampaign(params: CampaignData) {
-    const { campaign } = await this.post<{ campaign: Campaign }>(
-      this.baseURL + `/campaigns`,
-      { campaign: params },
-    );
+    const { campaign } = await this.post<{ campaign: Campaign }>(this.baseURL + `/campaigns`, { campaign: params });
     return campaign;
   }
 
@@ -3222,9 +2895,7 @@ export class StreamChat<
    * @return {Campaign} A Campaign
    */
   async getCampaign(id: string) {
-    const { campaign } = await this.get<{ campaign: Campaign }>(
-      this.baseURL + `/campaigns/${id}`,
-    );
+    const { campaign } = await this.get<{ campaign: Campaign }>(this.baseURL + `/campaigns/${id}`);
     return campaign;
   }
 
@@ -3235,10 +2906,7 @@ export class StreamChat<
    * @return {Campaign[]} Campaigns
    */
   async listCampaigns(options: { limit?: number; offset?: number }) {
-    const { campaigns } = await this.get<{ campaigns: Campaign[] }>(
-      this.baseURL + `/campaigns`,
-      options,
-    );
+    const { campaigns } = await this.get<{ campaigns: Campaign[] }>(this.baseURL + `/campaigns`, options);
     return campaigns;
   }
 
@@ -3251,10 +2919,9 @@ export class StreamChat<
    * @return {Campaign} Updated Campaign
    */
   async updateCampaign(id: string, params: Partial<CampaignData>) {
-    const { campaign } = await this.put<{ campaign: Campaign }>(
-      this.baseURL + `/campaigns/${id}`,
-      { campaign: params },
-    );
+    const { campaign } = await this.put<{ campaign: Campaign }>(this.baseURL + `/campaigns/${id}`, {
+      campaign: params,
+    });
     return campaign;
   }
 
@@ -3279,10 +2946,9 @@ export class StreamChat<
    */
   async scheduleCampaign(id: string, params: { sendAt: number }) {
     const { sendAt } = params;
-    const { campaign } = await this.patch<{ campaign: Campaign }>(
-      this.baseURL + `/campaigns/${id}/schedule`,
-      { send_at: sendAt },
-    );
+    const { campaign } = await this.patch<{ campaign: Campaign }>(this.baseURL + `/campaigns/${id}/schedule`, {
+      send_at: sendAt,
+    });
     return campaign;
   }
 
@@ -3294,9 +2960,7 @@ export class StreamChat<
    * @return {Campaign} Stopped Campaign
    */
   async stopCampaign(id: string) {
-    const { campaign } = await this.patch<{ campaign: Campaign }>(
-      this.baseURL + `/campaigns/${id}/stop`,
-    );
+    const { campaign } = await this.patch<{ campaign: Campaign }>(this.baseURL + `/campaigns/${id}/stop`);
     return campaign;
   }
 
@@ -3308,9 +2972,7 @@ export class StreamChat<
    * @return {Campaign} Resumed Campaign
    */
   async resumeCampaign(id: string) {
-    const { campaign } = await this.patch<{ campaign: Campaign }>(
-      this.baseURL + `/campaigns/${id}/resume`,
-    );
+    const { campaign } = await this.patch<{ campaign: Campaign }>(this.baseURL + `/campaigns/${id}/resume`);
     return campaign;
   }
 
@@ -3323,10 +2985,7 @@ export class StreamChat<
    */
   async testCampaign(id: string, params: { users: string[] }) {
     const { users } = params;
-    const { campaign } = await this.post<{ campaign: Campaign }>(
-      this.baseURL + `/campaigns/${id}/test`,
-      { users },
-    );
+    const { campaign } = await this.post<{ campaign: Campaign }>(this.baseURL + `/campaigns/${id}/test`, { users });
     return campaign;
   }
 
@@ -3360,10 +3019,10 @@ export class StreamChat<
    * @return {DeleteChannelsResponse} Result of the soft deletion, if server-side, it holds the task ID as well
    */
   async deleteChannels(cids: string[], options: { hard_delete?: boolean } = {}) {
-    return await this.post<APIResponse & DeleteChannelsResponse>(
-      this.baseURL + `/channels/delete`,
-      { cids, ...options },
-    );
+    return await this.post<APIResponse & DeleteChannelsResponse>(this.baseURL + `/channels/delete`, {
+      cids,
+      ...options,
+    });
   }
 
   /**
@@ -3378,21 +3037,11 @@ export class StreamChat<
     if (options?.user !== 'soft' && options?.user !== 'hard') {
       throw new Error('Invalid delete user options. user must be one of [soft hard]');
     }
-    if (
-      options.messages !== undefined &&
-      options.messages !== 'soft' &&
-      options.messages !== 'hard'
-    ) {
+    if (options.messages !== undefined && options.messages !== 'soft' && options.messages !== 'hard') {
       throw new Error('Invalid delete user options. messages must be one of [soft hard]');
     }
-    if (
-      options.conversations !== undefined &&
-      options.conversations !== 'soft' &&
-      options.conversations !== 'hard'
-    ) {
-      throw new Error(
-        'Invalid delete user options. conversations must be one of [soft hard]',
-      );
+    if (options.conversations !== undefined && options.conversations !== 'soft' && options.conversations !== 'hard') {
+      throw new Error('Invalid delete user options. conversations must be one of [soft hard]');
     }
     return await this.post<APIResponse & TaskResponse>(this.baseURL + `/users/delete`, {
       user_ids,