@amityco/ts-sdk 7.1.0 → 7.1.1-c8d4edca.0

package/dist/marker/events/onChannelUnreadInfoUpdatedLocal.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Internal used only
+ *
+ * Fired when an {@link Amity.userMessageFeedMarkers} has been resolved by Object Rsesolver
+ *
+ * @param callback The function to call when the event was fired
+ * @returns an {@link Amity.Unsubscriber} function to stop listening
+ *
+ * @category MessageMarker Events
+ */
+export declare const onChannelUnreadInfoUpdatedLocal: (callback: Amity.Listener<Amity.Events['local.channelUnreadInfo.updated']>) => Amity.Unsubscriber;
+//# sourceMappingURL=onChannelUnreadInfoUpdatedLocal.d.ts.map

package/dist/marker/events/onChannelUnreadInfoUpdatedLocal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onChannelUnreadInfoUpdatedLocal.d.ts","sourceRoot":"","sources":["../../../src/marker/events/onChannelUnreadInfoUpdatedLocal.ts"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AACH,eAAO,MAAM,+BAA+B,aAChC,MAAM,QAAQ,CAAC,MAAM,MAAM,CAAC,iCAAiC,CAAC,CAAC,KACxE,MAAM,YAaR,CAAC"}

package/dist/messageRepository/utils/markReadMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markReadMessage.d.ts","sourceRoot":"","sources":["../../../src/messageRepository/utils/markReadMessage.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,YAAa,MAAM,eAAe,SAK7D,CAAC"}
+{"version":3,"file":"markReadMessage.d.ts","sourceRoot":"","sources":["../../../src/messageRepository/utils/markReadMessage.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,YAAa,MAAM,eAAe,SAU7D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/ts-sdk",
-  "version": "7.1.0",
+  "version": "7.1.1-c8d4edca.0",
   "license": "CC-BY-ND-4.0",
   "author": "amity.co <developers@amity.co> (https://amity.co)",
   "description": "Amity Social Cloud Typescript SDK",

package/src/@types/core/events.ts

@@ -237,7 +237,8 @@ declare global {
       };
 
       'local.subChannelUnread.updated': Amity.SubChannelUnreadInfo;
-      'local.channelUnread.updated': Amity.ChannelUnreadInfo;
+      'local.channelUnreadInfo.updated': Amity.ChannelUnreadInfo;
+      'local.channelUnread.updated': Amity.ChannelUnread;
 
       'local.story.created': Amity.StoryPayload;
       'local.story.updated': Amity.StoryPayload;

package/src/@types/core/model.ts

@@ -25,6 +25,8 @@ declare global {
       channelUnreadInfo: Amity.ChannelUnreadInfo;
       subChannelUnreadInfo: Amity.SubChannelUnreadInfo;
 
+      channelUnread: Amity.ChannelUnread;
+
       channelMarker: Amity.ChannelMarker;
       subChannelMarker: Amity.SubChannelMarker;
       messageMarker: Amity.MessageMarker;
@@ -84,6 +86,8 @@ declare global {
       channelUnreadInfo: Pick<Amity.ChannelUnreadInfo, 'channelId'>;
       subChannelUnreadInfo: Pick<Amity.SubChannelUnreadInfo, 'subChannelId'>;
 
+      channelUnread: Pick<Amity.ChannelUnread, 'channelId'>;
+
       channelMarker: Pick<Amity.ChannelMarker, 'entityId' | 'userId'>;
       subChannelMarker: Pick<Amity.SubChannelMarker, 'feedId' | 'entityId' | 'userId'>;
       messageMarker: Pick<Amity.MessageMarker, 'feedId' | 'contentId' | 'creatorId'>;

package/src/@types/core/readReceipt.ts

@@ -8,12 +8,25 @@ declare global {
     }
 
     type ReadReceipt = {
-      subChannelId: Amity.SubChannel['subChannelId'];
+      channelId: Amity.Channel['channelId'];
       latestSegment: number;
       latestSyncSegment: number;
     };
 
     type ReadReceiptSyncJob = {
+      channelId: Amity.Channel['channelId'];
+      segment: number;
+      syncState: ReadReceiptSyncState;
+      retryCount: number;
+    };
+
+    type LegacyReadReceipt = {
+      subChannelId: Amity.SubChannel['subChannelId'];
+      latestSegment: number;
+      latestSyncSegment: number;
+    };
+
+    type LegacyReadReceiptSyncJob = {
       subChannelId: Amity.SubChannel['subChannelId'];
       segment: number;
       syncState: ReadReceiptSyncState;

package/src/@types/domains/channel.ts

@@ -137,5 +137,16 @@ declare global {
       Amity.Membership<'channel'>['userId'],
       Pick<QueryChannelMembers, 'page'>
     >;
+
+    // Use for channel's unread count value stored in the local cache
+    type ChannelUnread = {
+      channelId: Amity.Channel['channelId'];
+      unreadCount: number;
+      isMentioned: boolean;
+      readToSegment: number;
+      lastSegment: number;
+      lastMentionSegment: number;
+      isDeleted: boolean;
+    };
   }
 }

package/src/@types/domains/client.ts

@@ -56,6 +56,8 @@ declare global {
 
       isUnreadCountEnabled: boolean;
 
+      useLegacyUnreadCount: boolean;
+
       use: () => void;
 
       accessTokenExpiryWatcher: (sessionHandler: Amity.SessionHandler) => Amity.Unsubscriber;

package/src/channelRepository/api/markChannelsAsReadBySegment.ts

@@ -0,0 +1,29 @@
+import { getActiveClient } from '~/client/api/activeClient';
+
+/**
+ *
+ * Mark subChannel as read by readToSegment
+ *
+ * @param subChannelIds the IDs of the {@link Amity.SubChannel} to update
+ * @param readToSegment the segment to mark as read
+ * @returns a success boolean if the {@link Amity.SubChannel} was updated
+ *
+ * @category Channel API
+ * @async
+ */
+
+export const markChannelsAsReadBySegment = async (
+  readings: {
+    channelId: Amity.Channel['channelId'];
+    readToSegment: number;
+  }[],
+): Promise<boolean> => {
+  const client = getActiveClient();
+
+  try {
+    await client.http.post<Amity.MarkAsReadPayload>('api/v3/channels/seen', { channels: readings });
+    return true;
+  } catch (e) {
+    return false;
+  }
+};

package/src/channelRepository/events/onChannelUnreadUpdatedLocal.ts

@@ -0,0 +1,29 @@
+import { getActiveClient } from '~/client/api/activeClient';
+import { createEventSubscriber } from '~/core/events';
+
+/**
+ * Internal used only
+ *
+ * Fired when an {@link Amity.userMessageFeedMarkers} has been resolved by Object Rsesolver
+ *
+ * @param callback The function to call when the event was fired
+ * @returns an {@link Amity.Unsubscriber} function to stop listening
+ *
+ * @category MessageMarker Events
+ */
+export const onChannelUnreadUpdatedLocal = (
+  callback: Amity.Listener<Amity.Events['local.channelUnread.updated']>,
+): Amity.Unsubscriber => {
+  const client = getActiveClient();
+
+  const filter = (payload: Amity.Events['local.channelUnread.updated']) => {
+    callback(payload);
+  };
+
+  return createEventSubscriber(
+    client,
+    'channel/onChannelUnreadUpdatedLocal',
+    'local.channelUnread.updated',
+    filter,
+  );
+};

package/src/channelRepository/observers/getChannel.ts

@@ -32,8 +32,9 @@ import { isEqual } from '~/utils/isEqual';
 import { updateChannelCache } from '../utils/updateChannelCache';
 import { onChannelMarkerUpdated } from '~/marker/events/onChannelMarkerUpdated';
 import { onSubChannelCreated } from '~/subChannelRepository';
-import { onChannelUnreadUpdatedLocal } from '~/marker/events/onChannelUnreadUpdatedLocal';
+import { onChannelUnreadInfoUpdatedLocal } from '~/marker/events/onChannelUnreadInfoUpdatedLocal';
 import { constructChannelObject } from '../utils/constructChannelObject';
+import { onChannelUnreadUpdatedLocal } from '../events/onChannelUnreadUpdatedLocal';
 
 /* begin_public_function
   id: channel.get
@@ -295,6 +296,7 @@ export const getChannel = (
         'channel',
       ),
       convertEventPayload(onSubChannelCreated, 'channelId', 'channel'),
+      convertEventPayload(onChannelUnreadInfoUpdatedLocal, 'channelId', 'channel'),
       convertEventPayload(onChannelUnreadUpdatedLocal, 'channelId', 'channel'),
     ],
     {

package/src/channelRepository/observers/getChannels/ChannelLiveCollectionController.ts

@@ -55,8 +55,9 @@ import { prepareUnreadCountInfo } from '~/channelRepository/utils/prepareUnreadC
 import { resolveUnreadInfoOnChannelEvent } from '~/channelRepository/utils/resolveUnreadInfoOnChannelEvent';
 import { onChannelResolved } from '~/channelRepository/events/onChannelResolved';
 import { onUserMessageFeedMarkerResolved } from '~/marker/events/onUserMessageFeedMarkerResolved';
-import { onChannelUnreadUpdatedLocal } from '~/marker/events/onChannelUnreadUpdatedLocal';
+import { onChannelUnreadInfoUpdatedLocal } from '~/marker/events/onChannelUnreadInfoUpdatedLocal';
 import { constructChannelObject } from '~/channelRepository/utils/constructChannelObject';
+import { onChannelUnreadUpdatedLocal } from '~/channelRepository/events/onChannelUnreadUpdatedLocal';
 
 export class ChannelLiveCollectionController extends LiveCollectionController<
   'channel',
@@ -566,6 +567,10 @@ export class ChannelLiveCollectionController extends LiveCollectionController<
         },
         action: Amity.ChannelActionType.OnResolveUnread,
       },
+      {
+        fn: convertEventPayload(onChannelUnreadInfoUpdatedLocal, 'channelId', 'channel'),
+        action: Amity.ChannelActionType.OnUpdate,
+      },
       {
         fn: convertEventPayload(onChannelUnreadUpdatedLocal, 'channelId', 'channel'),
         action: Amity.ChannelActionType.OnUpdate,

package/src/channelRepository/utils/constructChannelDynamicValue.ts

@@ -1,17 +1,27 @@
+import { get } from 'http';
 import { shallowClone } from '~/utils/shallowClone';
 import { getChannelIsMentioned } from './getChannelIsMentioned';
 import { getSubChannelsUnreadCount } from './getSubChannelsUnreadCount';
+import { getActiveClient } from '~/client/api/activeClient';
+import { getLegacyChannelUnread } from './getLegacyChannelUnread';
 
 export const constructChannelDynamicValue = (
   channel: Amity.StaticInternalChannel,
 ): Amity.InternalChannel => {
+  const client = getActiveClient();
   const { messageCount, ...rest } = channel;
+
   return shallowClone(rest, {
-    get isMentioned() {
-      return getChannelIsMentioned(rest);
+    get unreadCount() {
+      return getLegacyChannelUnread(rest.channelId)?.unreadCount ?? 0;
     },
     get subChannelsUnreadCount() {
       return getSubChannelsUnreadCount(rest);
     },
+    get isMentioned() {
+      if (client.useLegacyUnreadCount)
+        return getLegacyChannelUnread(rest.channelId)?.isMentioned ?? false;
+      return getChannelIsMentioned(rest);
+    },
   });
 };

package/src/channelRepository/utils/getLegacyChannelUnread.ts

@@ -0,0 +1,5 @@
+import { pullFromCache } from '~/cache/api/pullFromCache';
+
+export const getLegacyChannelUnread = (channelId: string) => {
+  return pullFromCache<Amity.ChannelUnreadInfo>(['channelUnread', 'get', channelId])?.data;
+};

package/src/channelRepository/utils/prepareChannelPayload.ts

@@ -5,9 +5,8 @@ import { getChannelMarkers } from '~/marker/api/getChannelMarkers';
 import { updateChannelMessagePreviewCache } from '~/messagePreview/utils';
 import { getActiveClient } from '~/client/api/activeClient';
 import { pullFromCache } from '~/cache/api/pullFromCache';
-import { getSubChannelsUnreadCount } from './getSubChannelsUnreadCount';
-import { getChannelIsMentioned } from './getChannelIsMentioned';
 import { convertRawUserToInternalUser } from '~/userRepository/utils/convertRawUserToInternalUser';
+import { pushToCache } from '~/cache/api';
 
 export const MARKER_INCLUDED_CHANNEL_TYPE = ['broadcast', 'conversation', 'community'];
 export const isUnreadCountSupport = ({ type }: Pick<Amity.RawChannel, 'type'>) =>
@@ -48,6 +47,37 @@ export const preUpdateChannelCache = (
   });
 };
 
+const updateChannelUnread = ({
+  currentUserId,
+  channels,
+  channelUsers,
+}: {
+  currentUserId: Amity.User['userId'];
+  channels: Amity.RawChannel[];
+  channelUsers: Amity.RawMembership<'channel'>[];
+}) => {
+  for (let i = 0; i < channels.length; i += 1) {
+    const cacheKey = ['channelUnread', 'get', channels[i].channelId];
+    const { readToSegment, lastMentionedSegment } = channelUsers.find(
+      channelUser =>
+        channelUser.channelId === channels[i].channelId && channelUser.userId === currentUserId,
+    ) || {
+      readToSegment: 0,
+      lastMentionedSegment: 0,
+    };
+
+    pushToCache(cacheKey, {
+      channelId: channels[i].channelId,
+      lastSegment: channels[i].messageCount,
+      readToSegment,
+      lastMentionedSegment,
+      unreadCount: channels[i].messageCount - readToSegment,
+      isMentioned: lastMentionedSegment > readToSegment,
+      isDeleted: channels[i].isDeleted,
+    });
+  }
+};
+
 export const prepareChannelPayload = async (
   rawPayload: Amity.ChannelPayload,
   options: { isMessagePreviewUpdated?: boolean } = { isMessagePreviewUpdated: true },
@@ -64,28 +94,38 @@ export const prepareChannelPayload = async (
     updateChannelMessagePreviewCache(rawPayload);
   }
 
-  const markerIds = rawPayload.channels
-    // filter channel by type. Only conversation, community and broadcast type are included.
-    .filter(isUnreadCountSupport)
-    .map(({ channelInternalId }) => channelInternalId);
-
-  if (markerIds.length > 0) {
-    // since the get markers method requires a channel cache to function with the reducer.
-    preUpdateChannelCache(rawPayload, { isMessagePreviewUpdated: options.isMessagePreviewUpdated });
-
-    try {
-      await getChannelMarkers(markerIds);
-    } catch (e) {
-      // empty block (from the spec, allow marker fetch to fail without having to do anything)
+  if (client.useLegacyUnreadCount) {
+    updateChannelUnread({
+      channels: rawPayload.channels,
+      channelUsers: rawPayload.channelUsers,
+      currentUserId: client.userId!,
+    });
+  } else {
+    const markerIds = rawPayload.channels
+      // filter channel by type. Only conversation, community and broadcast type are included.
+      .filter(isUnreadCountSupport)
+      .map(({ channelInternalId }) => channelInternalId);
+
+    if (markerIds.length > 0) {
+      // since the get markers method requires a channel cache to function with the reducer.
+      preUpdateChannelCache(rawPayload, {
+        isMessagePreviewUpdated: options.isMessagePreviewUpdated,
+      });
+
+      try {
+        await getChannelMarkers(markerIds);
+      } catch (e) {
+        // empty block (from the spec, allow marker fetch to fail without having to do anything)
+      }
     }
   }
 
-  // attach marker to channel
+  // convert raw channel to internal channel
   const channels = rawPayload.channels.map(payload =>
     convertFromRaw(payload, { isMessagePreviewUpdated: options.isMessagePreviewUpdated }),
   );
 
-  // user marker to channel users
+  // convert raw channel user to membership (add user object)
   const channelUsers: Amity.Membership<'channel'>[] = rawPayload.channelUsers.map(channelUser => {
     return convertRawMembershipToMembership<'channel'>(channelUser);
   });

package/src/client/api/createClient.ts

@@ -86,6 +86,8 @@ export const createClient = (
   const sessionHandler = undefined;
 
   const isUnreadCountEnabled = false;
+  // Legacy unread count is true by default
+  const useLegacyUnreadCount = true;
 
   const client = {
     version: `${VERSION}`,
@@ -122,6 +124,7 @@ export const createClient = (
     use: () => setActiveClient(client),
 
     isUnreadCountEnabled,
+    useLegacyUnreadCount,
 
     getMarkerSyncConsistentMode,
 

package/src/client/api/enableUnreadCount.ts

@@ -17,6 +17,7 @@ export const enableUnreadCount = () => {
   if (client.isUnreadCountEnabled) return false;
 
   client.isUnreadCountEnabled = true;
+  client.useLegacyUnreadCount = false;
 
   client.emitter.emit('unreadCountEnabled', true);
 

package/src/client/api/login.ts

@@ -11,6 +11,7 @@ import { onUserDeleted } from '~/userRepository/events/onUserDeleted';
 
 import analyticsEngineOnLoginHandler from '~/analytic/utils/analyticsEngineOnLoginHandler';
 import readReceiptSyncEngineOnLoginHandler from '~/client/utils/ReadReceiptSync/readReceiptSyncEngineOnLoginHandler';
+import legacyReadReceiptSyncEngineOnLoginHandler from '~/client/utils/ReadReceiptSync/legacyReadReceiptSyncEngineOnLoginHandler';
 import objectResolverEngineOnLoginHandler from '~/client/utils/ObjectResolver/objectResolverEngineOnLoginHandler';
 import { logout } from './logout';
 
@@ -200,10 +201,13 @@ export const login = async (
 
       markReadEngineOnLoginHandler(),
       analyticsEngineOnLoginHandler(),
-      readReceiptSyncEngineOnLoginHandler(),
       objectResolverEngineOnLoginHandler(),
     );
 
+    if (client.useLegacyUnreadCount) {
+      subscriptions.push(readReceiptSyncEngineOnLoginHandler());
+    } else subscriptions.push(legacyReadReceiptSyncEngineOnLoginHandler());
+
     const markerSyncUnsubscriber = await startMarkerSync();
     subscriptions.push(markerSyncUnsubscriber);
   }

package/src/client/utils/ReadReceiptSync/legacyReadReceiptSyncEngine.ts

@@ -0,0 +1,267 @@
+import { pullFromCache, pushToCache, queryCache } from '~/cache/api';
+import { getActiveClient } from '../../api/activeClient';
+import { markAsReadBySegment } from '~/subChannelRepository/api/markAsReadBySegment';
+import { reCalculateChannelUnreadInfo } from '~/marker/utils/reCalculateChannelUnreadInfo';
+import { fireEvent } from '~/core/events';
+
+export class LegacyMessageReadReceiptSyncEngine {
+  private client: Amity.Client;
+
+  private isActive = true;
+
+  private MAX_RETRY = 3;
+
+  private JOB_QUEUE_SIZE = 120;
+
+  private jobQueue: Amity.LegacyReadReceiptSyncJob[] = [];
+
+  private timer: NodeJS.Timer | undefined;
+
+  // Interval for message read receipt sync in seconds
+  private RECEIPT_SYNC_INTERVAL = 1;
+
+  constructor() {
+    this.client = getActiveClient();
+    // Get remaining unsync read receipts from cache
+    this.getUnsyncJobs();
+  }
+
+  //  Call this when client call client.login
+  startSyncReadReceipt() {
+    // Start timer when start receipt sync
+    this.timer = setInterval(() => {
+      this.syncReadReceipts();
+    }, this.RECEIPT_SYNC_INTERVAL * 1000);
+  }
+
+  // Read receipt observer handling
+  syncReadReceipts(): void {
+    if (this.jobQueue.length === 0 || this.isActive === false) return;
+
+    const readReceipt = this.getReadReceipt();
+    if (readReceipt) {
+      this.markReadApi(readReceipt);
+    }
+  }
+
+  private getUnsyncJobs(): void {
+    // Get all read receipts that has latestSyncSegment < latestSegment
+    const readReceipts = queryCache<Amity.LegacyReadReceipt>(['legacyReadReceipt'])?.filter(
+      ({ data }) => {
+        return data.latestSyncSegment < data.latestSegment;
+      },
+    );
+
+    // Enqueue unsync read receipts to the job queue
+    readReceipts?.forEach(({ data: readReceipt }) => {
+      this.enqueueReadReceipt(readReceipt.subChannelId, readReceipt.latestSegment);
+    });
+  }
+
+  private getReadReceipt(): Amity.LegacyReadReceiptSyncJob | undefined {
+    // Get first read receipt in queue
+    const syncJob = this.jobQueue[0];
+
+    if (!syncJob) return;
+    // Skip when it's syncing
+    if (syncJob.syncState === Amity.ReadReceiptSyncState.SYNCING) return;
+
+    // Get readReceipt from cache by subChannelId
+    const readReceipt = pullFromCache<Amity.LegacyReadReceipt>([
+      'legacyReadReceipt',
+      syncJob.subChannelId,
+    ])?.data;
+
+    if (!readReceipt) return;
+
+    if (readReceipt?.latestSegment > readReceipt?.latestSyncSegment) {
+      syncJob.segment = readReceipt.latestSegment;
+      return syncJob;
+    }
+    // Clear all synced job in job queue
+    this.removeSynedReceipt(readReceipt.subChannelId, readReceipt.latestSegment);
+
+    // Recursion getReadReceipt() until get unsync read receipt or job queue is empty
+    return this.getReadReceipt();
+  }
+
+  private async markReadApi(syncJob: Amity.LegacyReadReceiptSyncJob): Promise<void> {
+    const newSyncJob = syncJob;
+    newSyncJob.syncState = Amity.ReadReceiptSyncState.SYNCING;
+
+    const { subChannelId, segment } = newSyncJob;
+
+    const response = await markAsReadBySegment({ subChannelId, readToSegment: segment });
+
+    if (response) {
+      this.removeSynedReceipt(syncJob.subChannelId, syncJob.segment);
+
+      const readReceiptCache = pullFromCache<Amity.LegacyReadReceipt>([
+        'legacyReadReceipt',
+        subChannelId,
+      ])?.data;
+
+      pushToCache(['legacyReadReceipt', subChannelId], {
+        ...readReceiptCache,
+        latestSyncSegment: segment,
+      });
+    } else if (!response) {
+      if (newSyncJob.retryCount > this.MAX_RETRY) {
+        this.removeJobFromQueue(newSyncJob);
+      } else {
+        newSyncJob.retryCount += 1;
+        newSyncJob.syncState = Amity.ReadReceiptSyncState.CREATED;
+      }
+    }
+  }
+
+  private removeSynedReceipt(subChannelId: string, segment: number) {
+    const syncJobs = this.jobQueue;
+
+    syncJobs.forEach(job => {
+      if (job.subChannelId === subChannelId && job.segment <= segment) {
+        this.removeJobFromQueue(job);
+      }
+    });
+  }
+
+  private startObservingReadReceiptQueue(): void {
+    if (this.client.isUnreadCountEnabled) {
+      this.isActive = true;
+      this.startSyncReadReceipt();
+    }
+  }
+
+  private stopObservingReadReceiptQueue(): void {
+    this.isActive = false;
+
+    const syncJobs = this.jobQueue;
+    syncJobs.map(job => {
+      if (job.syncState === Amity.ReadReceiptSyncState.SYNCING) {
+        return { ...job, syncState: Amity.ReadReceiptSyncState.CREATED };
+      }
+
+      return job;
+    });
+
+    if (this.timer) clearInterval(this.timer);
+  }
+
+  // Session Management
+  onSessionEstablished(): void {
+    this.startObservingReadReceiptQueue();
+  }
+
+  onSessionDestroyed(): void {
+    this.stopObservingReadReceiptQueue();
+    this.jobQueue = [];
+  }
+
+  onTokenExpired(): void {
+    this.stopObservingReadReceiptQueue();
+  }
+
+  // Network Connection Management
+  onNetworkOffline(): void {
+    // Stop observing to the read receipt queue.
+    this.stopObservingReadReceiptQueue();
+  }
+
+  onNetworkOnline(): void {
+    // Resume observing to the read receipt queue.
+    this.startObservingReadReceiptQueue();
+  }
+
+  markRead(subChannelId: string, segment: number): void {
+    // Step 1: Optimistic update of subChannelUnreadInfo.readToSegment to message.segment
+    const cacheKey = ['subChannelUnreadInfo', 'get', subChannelId];
+    const subChannelUnreadInfo = pullFromCache<Amity.SubChannelUnreadInfo>(cacheKey)?.data;
+
+    if (subChannelUnreadInfo && segment > subChannelUnreadInfo.readToSegment) {
+      subChannelUnreadInfo.readToSegment = segment;
+      subChannelUnreadInfo.unreadCount = Math.max(subChannelUnreadInfo.lastSegment - segment, 0);
+
+      const channelUnreadInfo = reCalculateChannelUnreadInfo(subChannelUnreadInfo.channelId);
+      fireEvent('local.channelUnreadInfo.updated', channelUnreadInfo);
+
+      pushToCache(cacheKey, subChannelUnreadInfo);
+      fireEvent('local.subChannelUnread.updated', subChannelUnreadInfo);
+    }
+
+    // Step 2: Enqueue the read receipt
+    this.enqueueReadReceipt(subChannelId, segment);
+  }
+
+  private enqueueReadReceipt(subChannelId: string, segment: number): void {
+    const readReceipt = pullFromCache<Amity.LegacyReadReceipt>([
+      'legacyReadReceipt',
+      subChannelId,
+    ])?.data;
+
+    // Create new read receipt if it's not exists and add job to queue
+    if (!readReceipt) {
+      const readReceiptSubChannel: Amity.LegacyReadReceipt = {
+        subChannelId,
+        latestSegment: segment,
+        latestSyncSegment: 0,
+      };
+
+      pushToCache(['legacyReadReceipt', subChannelId], readReceiptSubChannel);
+    } else if (readReceipt.latestSegment < segment) {
+      pushToCache(['legacyReadReceipt', subChannelId], { ...readReceipt, latestSegment: segment });
+    } else if (readReceipt.latestSyncSegment >= segment) {
+      // Skip the job when lastSyncSegment > = segment
+      return;
+    }
+
+    let syncJob: Amity.LegacyReadReceiptSyncJob | null = this.getSyncJob(subChannelId);
+
+    if (syncJob === null || syncJob.syncState === Amity.ReadReceiptSyncState.SYNCING) {
+      syncJob = {
+        subChannelId,
+        segment,
+        syncState: Amity.ReadReceiptSyncState.CREATED,
+        retryCount: 0,
+      };
+
+      this.enqueueJob(syncJob);
+    } else if (syncJob.segment < segment) {
+      syncJob.segment = segment;
+    }
+  }
+
+  private getSyncJob(subChannelId: string): Amity.LegacyReadReceiptSyncJob | null {
+    const syncJobs = this.jobQueue;
+
+    const targetJob = syncJobs.find(job => job.subChannelId === subChannelId);
+
+    return targetJob || null;
+  }
+
+  private enqueueJob(syncJob: Amity.LegacyReadReceiptSyncJob) {
+    if (this.jobQueue.length < this.JOB_QUEUE_SIZE) {
+      this.jobQueue.push(syncJob);
+    } else {
+      // Remove oldest job when queue reach maximum capacity
+      this.jobQueue.shift();
+      this.jobQueue.push(syncJob);
+    }
+  }
+
+  private removeJobFromQueue(item: Amity.LegacyReadReceiptSyncJob) {
+    const index = this.jobQueue.indexOf(item);
+    if (index > -1) {
+      this.jobQueue.splice(index, 1);
+    }
+  }
+}
+
+let instance: LegacyMessageReadReceiptSyncEngine | null = null;
+
+export default {
+  getInstance: () => {
+    if (!instance) instance = new LegacyMessageReadReceiptSyncEngine();
+
+    return instance;
+  },
+};