stream-chat 4.4.3 → 4.5.0-beta.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,7 @@ import {
   DeleteUserOptions,
   DeleteChannelsResponse,
   TaskResponse,
+  ReservedMessageFields,
 } from './types';
 import { InsightMetrics, postInsights } from './insights';
 
@@ -125,27 +128,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 +149,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 +178,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 +223,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 +238,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 +286,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 +364,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 +449,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 +486,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 +529,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 +552,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 +567,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 +619,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 +630,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 +702,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 +751,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 +769,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 +804,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 +815,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 +857,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 +916,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 +979,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 +1032,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 +1097,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 +1114,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 +1149,6 @@ export class StreamChat<
       ReactionType,
       UserType
     >;
-    event.received_at = new Date();
     this.dispatchEvent(event);
   };
 
@@ -1350,15 +1233,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 +1275,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 +1309,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 +1326,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 +1346,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 +1366,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 +1387,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 +1424,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 +1439,43 @@ 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 });
 
-    return await this.wsConnection.connect();
+    try {
+      // 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'] });
+
+        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 +1507,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 +1573,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 +1627,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 +1673,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 +1696,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 +1711,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 +1787,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 +1810,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 +1832,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 +1890,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 +1929,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 +2077,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 +2089,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>;
       }
@@ -2357,16 +2108,12 @@ export class StreamChat<
     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'",
-      );
+      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'",
-      );
+      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,
@@ -2420,19 +2167,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 +2211,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 +2224,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 +2237,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,13 +2250,10 @@ export class StreamChat<
    * @returns {Promise<APIResponse>}
    */
   async unflagUser(targetID: string, options: { user_id?: string } = {}) {
-    return await this.post<FlagUserResponse<UserType>>(
-      this.baseURL + '/moderation/unflag',
-      {
-        target_user_id: targetID,
-        ...options,
-      },
-    );
+    return await this.post<FlagUserResponse<UserType>>(this.baseURL + '/moderation/unflag', {
+      target_user_id: targetID,
+      ...options,
+    });
   }
 
   /**
@@ -2553,10 +2281,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 +2289,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 +2302,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 +2331,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,
     });
@@ -2656,10 +2360,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;
@@ -2704,10 +2405,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 +2431,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 +2442,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 +2475,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 +2514,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 +2529,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 +2537,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 +2563,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 = {
@@ -2934,10 +2579,10 @@ export class StreamChat<
         user_id: this.userID,
         ...options.params,
         api_key: this.key,
-        connection_id: this.wsConnection?.connectionID,
+        connection_id: this._getConnectionID(),
       },
       headers: {
-        Authorization: token,
+        ...authorization,
         'stream-auth-type': this.getAuthType(),
         'X-Stream-Client': this.getUserAgent(),
         ...options.headers,
@@ -2965,6 +2610,22 @@ 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,
+      user_token: this.tokenManager.getToken(),
+      server_determines_connection_id: true,
+      device: this.options.device,
+      client_request_id,
+    });
+  };
+
   verifyWebhook(requestBody: string, xSignature: string) {
     return !!this.secret && CheckSignature(requestBody, this.secret, xSignature);
   }
@@ -3051,15 +2712,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 +2739,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 +2754,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 +2767,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 +2778,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 +2790,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 +2801,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 +2814,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 +2837,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 +2849,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 +2860,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 +2873,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 +2900,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 +2914,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 +2926,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 +2939,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 +2973,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 +2991,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,