@droppii-org/chat-mobile 0.2.108 → 0.2.110

package/lib/typescript/src/utils/promise.d.ts

@@ -10,4 +10,10 @@ export type SettledResult<T> = {
  * ship it, so a rejection would otherwise short-circuit Promise.all.
  */
 export declare const allSettled: <T extends readonly unknown[]>(promises: readonly [...T]) => Promise<{ [K in keyof T]: SettledResult<Awaited<T[K]>>; }>;
+/**
+ * Rejects with `Error('timeout')` if `promise` hasn't settled within `ms`.
+ * A settle that lands after the timeout is ignored, and the timer is always
+ * cleared on settle so nothing is left pending.
+ */
+export declare const withTimeout: <T>(promise: Promise<T>, ms: number) => Promise<T>;
 //# sourceMappingURL=promise.d.ts.map

package/lib/typescript/src/utils/promise.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"promise.d.ts","sourceRoot":"","sources":["../../../../src/utils/promise.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,CAAC,CAAC,IACvB;IAAE,MAAM,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,CAAC,CAAA;CAAE,GACjC;IAAE,MAAM,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAAC;AAE5C;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,OAAO,EAAE,EACrD,UAAU,SAAS,CAAC,GAAG,CAAC,CAAC,KACxB,OAAO,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAE,CAOK,CAAC"}
+{"version":3,"file":"promise.d.ts","sourceRoot":"","sources":["../../../../src/utils/promise.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,CAAC,CAAC,IACvB;IAAE,MAAM,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,CAAC,CAAA;CAAE,GACjC;IAAE,MAAM,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAAC;AAE5C;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,OAAO,EAAE,EACrD,UAAU,SAAS,CAAC,GAAG,CAAC,CAAC,KACxB,OAAO,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAE,CAOK,CAAC;AAEjE;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,MAAM,KAAG,OAAO,CAAC,CAAC,CAatE,CAAC"}

package/lib/typescript/src/utils/unreadAnchor.d.ts

@@ -0,0 +1,33 @@
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import type { UnreadAnchor } from '../types/unreadIndicator';
+/** Height of the divider at the top of the anchor row (Figma: 27px). */
+export declare const UNREAD_DIVIDER_HEIGHT = 27;
+export declare const messageBelongsToConversation: (message: Pick<MessageItem, "sendID" | "recvID" | "groupID">, conversationId: string) => boolean;
+/**
+ * Validates the server's first-unread message before it's trusted: a finite
+ * positive `seq`, a non-empty `clientMsgID`, and a message that belongs to
+ * this conversation. Anything else → `null` (no indicator).
+ */
+export declare const toUnreadAnchor: (message: MessageItem | null | undefined, conversationId: string) => UnreadAnchor | null;
+/**
+ * The list row that carries the divider: the first RENDERED message at or
+ * after the anchor. The anchor itself may be filtered out of the rendered list
+ * (internal / bot notification messages), so the match is by `seq` as well as
+ * by id. Only valid when the boundary is inside the loaded window — the raw
+ * window's oldest `seq` is at or before the anchor, or there's no older
+ * history — otherwise `null` (the anchor is out of window).
+ * Returns the row's list key (same as `keyExtractor` for real messages).
+ */
+export declare const resolveUnreadAnchorRowId: (rendered: readonly MessageItem[], anchor: UnreadAnchor | null, window: {
+    oldestLoadedSeq: number;
+    hasMoreOld: boolean;
+}) => string | null;
+/**
+ * Whether the top edge of a row (where the divider sits) is inside the
+ * viewport with at least `minVisiblePx` of it showing. A tall row clipped at
+ * the top — only its bottom part visible — does NOT count.
+ */
+export declare const isRowTopInViewport: (rowTop: number | undefined, scroll: number, scrollLength: number, minVisiblePx?: number) => boolean;
+/** D11: a deeplink to a message older than the first unread hides the indicator. */
+export declare const isDeeplinkTargetBeforeAnchor: (targetSeq?: number, anchorSeq?: number) => boolean;
+//# sourceMappingURL=unreadAnchor.d.ts.map

package/lib/typescript/src/utils/unreadAnchor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unreadAnchor.d.ts","sourceRoot":"","sources":["../../../../src/utils/unreadAnchor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAO7D,wEAAwE;AACxE,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC,eAAO,MAAM,4BAA4B,GACvC,SAAS,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,EAC3D,gBAAgB,MAAM,KACrB,OAKmE,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,cAAc,GACzB,SAAS,WAAW,GAAG,IAAI,GAAG,SAAS,EACvC,gBAAgB,MAAM,KACrB,YAAY,GAAG,IASjB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,SAAS,WAAW,EAAE,EAChC,QAAQ,YAAY,GAAG,IAAI,EAC3B,QAAQ;IAAE,eAAe,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,KACvD,MAAM,GAAG,IAWX,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,MAAM,GAAG,SAAS,EAC1B,QAAQ,MAAM,EACd,cAAc,MAAM,EACpB,qBAAoC,KACnC,OAG6C,CAAC;AAEjD,oFAAoF;AACpF,eAAO,MAAM,4BAA4B,GACvC,YAAY,MAAM,EAClB,YAAY,MAAM,KACjB,OACmE,CAAC"}

package/lib/typescript/src/utils/unreadIndicatorState.d.ts

@@ -0,0 +1,26 @@
+import type { BeginUnreadSessionOptions, UnreadAnchor, UnreadIndicatorState } from '../types/unreadIndicator';
+/**
+ * Pure transitions behind `useUnreadIndicatorStore` — kept free of React and
+ * zustand so they can be unit-tested. Every transition after `begin` is
+ * token-scoped: a token that isn't the current session's leaves the state
+ * untouched (same reference).
+ */
+export declare const UNREAD_GATE_WATCHDOG_SLACK_MS = 500;
+export declare const INITIAL_UNREAD_INDICATOR_STATE: UnreadIndicatorState;
+export declare const beginUnreadSession: (s: UnreadIndicatorState, { routeKey, conversationId, skip, awaitDeeplinkCheck, }: BeginUnreadSessionOptions, now: number) => UnreadIndicatorState;
+export declare const resolveUnreadSession: (s: UnreadIndicatorState, token: number, anchor: UnreadAnchor | null) => UnreadIndicatorState;
+export declare const clearUnreadSession: (s: UnreadIndicatorState, token: number) => UnreadIndicatorState;
+export declare const dismissUnreadPill: (s: UnreadIndicatorState, token: number) => UnreadIndicatorState;
+export declare const confirmUnreadDeeplinkCheck: (s: UnreadIndicatorState, token: number, hide: boolean) => UnreadIndicatorState;
+export declare const rearmUnreadDeeplinkCheck: (s: UnreadIndicatorState, token: number) => UnreadIndicatorState;
+export declare const resetUnreadSession: (s: UnreadIndicatorState) => UnreadIndicatorState;
+/** When the watchdog opens a still-pending gate on its own. */
+export declare const getUnreadGateDeadline: (s: UnreadIndicatorState, timeoutMs: number) => number;
+/**
+ * Whether mark-read must wait. Closed only for MY session while its lookup is
+ * still pending and within the watchdog deadline. No session yet (not focused,
+ * or access not confirmed) is fail-closed; a session superseded by another
+ * visit is not this screen's gate.
+ */
+export declare const isUnreadGateClosed: (s: UnreadIndicatorState, myToken: number | null, now: number, timeoutMs: number) => boolean;
+//# sourceMappingURL=unreadIndicatorState.d.ts.map

package/lib/typescript/src/utils/unreadIndicatorState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unreadIndicatorState.d.ts","sourceRoot":"","sources":["../../../../src/utils/unreadIndicatorState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,yBAAyB,EACzB,YAAY,EACZ,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAElC;;;;;GAKG;AAIH,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,eAAO,MAAM,8BAA8B,EAAE,oBAU5C,CAAC;AAIF,eAAO,MAAM,kBAAkB,GAC7B,GAAG,oBAAoB,EACvB,yDAKG,yBAAyB,EAC5B,KAAK,MAAM,KACV,oBAQD,CAAC;AAEH,eAAO,MAAM,oBAAoB,GAC/B,GAAG,oBAAoB,EACvB,OAAO,MAAM,EACb,QAAQ,YAAY,GAAG,IAAI,KAC1B,oBAGyD,CAAC;AAI7D,eAAO,MAAM,kBAAkB,GAC7B,GAAG,oBAAoB,EACvB,OAAO,MAAM,KACZ,oBAUI,CAAC;AAER,eAAO,MAAM,iBAAiB,GAC5B,GAAG,oBAAoB,EACvB,OAAO,MAAM,KACZ,oBACuE,CAAC;AAE3E,eAAO,MAAM,0BAA0B,GACrC,GAAG,oBAAoB,EACvB,OAAO,MAAM,EACb,MAAM,OAAO,KACZ,oBAMF,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,GAAG,oBAAoB,EACvB,OAAO,MAAM,KACZ,oBAGwC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,GAC7B,GAAG,oBAAoB,KACtB,oBAGD,CAAC;AAEH,+DAA+D;AAC/D,eAAO,MAAM,qBAAqB,GAChC,GAAG,oBAAoB,EACvB,WAAW,MAAM,KAChB,MAAoE,CAAC;AAExE;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAC7B,GAAG,oBAAoB,EACvB,SAAS,MAAM,GAAG,IAAI,EACtB,KAAK,MAAM,EACX,WAAW,MAAM,KAChB,OAIF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-mobile",
-  "version": "0.2.108",
+  "version": "0.2.110",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",
@@ -70,7 +70,7 @@
     "example-legacy": "yarn workspace @droppii-org/chat-mobile-example-legacy"
   },
   "dependencies": {
-    "@droppii/openim-rn-client-sdk": "git+ssh://git@github.com/droppii/open-im-sdk-reactnative.git#v1.0.0-rc41",
+    "@droppii/openim-rn-client-sdk": "git+ssh://git@github.com/droppii/open-im-sdk-reactnative.git#v1.0.0-rc44",
     "@legendapp/list": "^3.3.10",
     "axios": "^1.16.1",
     "lodash": "^4.18.1",

package/src/screens/ChatInfo/ChatInfo.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { KContainer, KNavigation } from '@droppii/libs';
 import { useNavigation } from '@react-navigation/native';
 import { useGetConversationTarget } from '../../hooks/conversation/useGetConversationDetail';
@@ -14,6 +14,7 @@ import { trans } from '../../translation';
 import { withChatDetailProvider } from '../../context';
 import { useChatDetailContext } from '../../context';
 import { getHeaderIconColor } from '../../utils/theme';
+import { useIsJoinedGroup } from '../../hooks/useIsJoinedGroup';
 
 const ChatInfo = memo(
   ({
@@ -39,6 +40,12 @@ const ChatInfo = memo(
     );
     const { leaveGroup } = useLeaveGroup();
 
+    const { data: isJoinedGroup } = useIsJoinedGroup(conversation?.groupID);
+
+    const isNotInGroup = useMemo(() => {
+      return isGroup ? !isJoinedGroup : false;
+    }, [isGroup, isJoinedGroup]);
+
     const handleLeaveGroup = useCallback(async () => {
       if (!conversation?.groupID) return;
 
@@ -78,6 +85,7 @@ const ChatInfo = memo(
           <ChatInfoProfile
             conversation={conversation}
             onPressSearch={onPressSearch}
+            isNotInGroup={isNotInGroup}
           />
           <ChatInfoMediaRow onPressMedia={onPressMedia} />
           <KContainer.VisibleView visible={isGroup}>
@@ -92,6 +100,7 @@ const ChatInfo = memo(
             onPressAddToGroup={onPressAddToGroup}
             onPressLeaveGroup={handleLeaveGroup}
             onDismissGroup={onDismissGroup}
+            isNotInGroup={isNotInGroup}
           />
         </KContainer.ScrollView>
       </KContainer.Page>

package/src/screens/ChatInfo/ChatInfoActions.tsx

@@ -26,6 +26,7 @@ interface ChatInfoActionsProps {
   onPressAddToGroup?: () => void;
   onPressLeaveGroup?: () => void;
   onDismissGroup?: () => void;
+  isNotInGroup?: boolean;
 }
 
 const ChatInfoActions = memo(
@@ -38,6 +39,7 @@ const ChatInfoActions = memo(
     onPressAddToGroup,
     onPressLeaveGroup,
     onDismissGroup,
+    isNotInGroup,
   }: ChatInfoActionsProps) => {
     const { pinConversation, unpinConversation } = usePinConversation();
     const isPinned = Boolean(conversation?.isPinned);
@@ -113,22 +115,24 @@ const ChatInfoActions = memo(
         }
       }
 
-      items.push({
-        leftNode: {
-          icon: { vectorName: isPinned ? 'thumbtack-off-o' : 'thumbtack-o' },
-        },
-        onPress: handlePinPress,
-        showChevron: false,
-        paddingH: '0.75rem',
-        paddingV: '0.75rem',
-        customLabel: (
-          <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
-            {isPinned
-              ? trans('chat:info_unpin_message')
-              : trans('chat:info_pin_message')}
-          </KLabel.Text>
-        ),
-      });
+      if (!isNotInGroup) {
+        items.push({
+          leftNode: {
+            icon: { vectorName: isPinned ? 'thumbtack-off-o' : 'thumbtack-o' },
+          },
+          onPress: handlePinPress,
+          showChevron: false,
+          paddingH: '0.75rem',
+          paddingV: '0.75rem',
+          customLabel: (
+            <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
+              {isPinned
+                ? trans('chat:info_unpin_message')
+                : trans('chat:info_pin_message')}
+            </KLabel.Text>
+          ),
+        });
+      }
 
       return items;
     }, [
@@ -141,11 +145,12 @@ const ChatInfoActions = memo(
       onPressCreateGroup,
       onPressAddToGroup,
       handlePinPress,
+      isNotInGroup,
     ]);
 
     const dangerData: KListItemBaseItemProps[] = useMemo(() => {
       const items: KListItemBaseItemProps[] = [];
-      if (isGroup) {
+      if (isGroup && !isNotInGroup) {
         items.push({
           leftNode: {
             icon: {
@@ -194,29 +199,31 @@ const ChatInfoActions = memo(
         }
       }
 
-      items.push({
-        label: trans('chat:info_delete_history'),
-        leftNode: {
-          icon: {
-            vectorName: 'trash-alt-o-1',
-            tintColor: KColors.danger.normal,
+      if (!isNotInGroup) {
+        items.push({
+          label: trans('chat:info_delete_history'),
+          leftNode: {
+            icon: {
+              vectorName: 'trash-alt-o-1',
+              tintColor: KColors.danger.normal,
+            },
           },
-        },
-        tintColor: KColors.danger.normal,
-        onPress: handleDeleteHistory,
-        showChevron: false,
-        paddingH: '0.75rem',
-        paddingV: '0.75rem',
-        customLabel: (
-          <KLabel.Text
-            typo="TextMdMedium"
-            color={KColors.danger.normal}
-            numberOfLines={1}
-          >
-            {trans('chat:info_delete_history')}
-          </KLabel.Text>
-        ),
-      });
+          tintColor: KColors.danger.normal,
+          onPress: handleDeleteHistory,
+          showChevron: false,
+          paddingH: '0.75rem',
+          paddingV: '0.75rem',
+          customLabel: (
+            <KLabel.Text
+              typo="TextMdMedium"
+              color={KColors.danger.normal}
+              numberOfLines={1}
+            >
+              {trans('chat:info_delete_history')}
+            </KLabel.Text>
+          ),
+        });
+      }
 
       return items;
     }, [
@@ -225,6 +232,7 @@ const ChatInfoActions = memo(
       handleDeleteHistory,
       isOwner,
       handleDismissGroup,
+      isNotInGroup,
     ]);
 
     return (

package/src/screens/ChatInfo/ChatInfoProfile.tsx

@@ -47,10 +47,11 @@ const QuickAction = memo(
 interface ChatInfoProfileProps {
   conversation?: ConversationItem;
   onPressSearch?: () => void;
+  isNotInGroup?: boolean;
 }
 
 const ChatInfoProfile = memo(
-  ({ conversation, onPressSearch }: ChatInfoProfileProps) => {
+  ({ conversation, onPressSearch, isNotInGroup }: ChatInfoProfileProps) => {
     const { faceURL, showName = '' } = conversation ?? {};
 
     const isMuted =
@@ -122,17 +123,21 @@ const ChatInfoProfile = memo(
             background={KColors.palette.gray.w25}
             iconColor={KColors.gray.dark}
           />
-          <QuickAction
-            iconName={isMuted ? 'bell-b' : 'bell-off-o'}
-            label={
-              isMuted ? trans('chat:unmute_action') : trans('chat:mute_action')
-            }
-            background={
-              isMuted ? KColors.primary.normal : KColors.palette.gray.w25
-            }
-            iconColor={isMuted ? KColors.white : KColors.gray.dark}
-            onPress={handleNotificationPress}
-          />
+          <KContainer.VisibleView visible={!isNotInGroup}>
+            <QuickAction
+              iconName={isMuted ? 'bell-b' : 'bell-off-o'}
+              label={
+                isMuted
+                  ? trans('chat:unmute_action')
+                  : trans('chat:mute_action')
+              }
+              background={
+                isMuted ? KColors.primary.normal : KColors.palette.gray.w25
+              }
+              iconColor={isMuted ? KColors.white : KColors.gray.dark}
+              onPress={handleNotificationPress}
+            />
+          </KContainer.VisibleView>
         </KContainer.View>
       </KContainer.View>
     );

package/src/screens/chat-detail/ChatDetail.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { DeviceEventEmitter } from 'react-native';
 
 import { useKeyboardScrollToEnd } from '@legendapp/list/keyboard';
@@ -40,6 +40,7 @@ import {
 } from '../../hooks/conversation/useGetConversationDetail';
 import {
   GroupJoinSource,
+  PeerType,
   type MessageItem,
 } from '@droppii/openim-rn-client-sdk';
 import { useMessages } from '../../hooks/message/useMessages';
@@ -51,7 +52,12 @@ import { useSingleAccessGuard } from '../../hooks/conversation/useSingleAccessGu
 import { useIsJoinedGroup } from '../../hooks/useIsJoinedGroup';
 import { UIUtils } from '../../utils/UIUtils';
 import { trans } from '../../translation';
-import { getGroupIdFromConversationId } from '../../utils/conversation';
+import {
+  getGroupIdFromConversationId,
+  isConversationParticipant,
+  isSingleConversationId,
+} from '../../utils/conversation';
+import { useUnreadIndicator } from './hooks/useUnreadIndicator';
 import { ChatDetailLoading } from './components/ChatDetailLoading';
 
 interface ChatDetailScreenProps extends Omit<
@@ -111,6 +117,25 @@ const ChatDetail = memo(
       []
     );
 
+    // Bot from the conversation itself: ChatDetailContext's flag is derived
+    // from an id this screen sets in an effect, so it's still false on the
+    // first effect pass.
+    const isBotThread = conversation?.peerType === PeerType.Bot;
+    // 1v1: only a participant may look up / mark read. Groups: the gate's
+    // `isReady` already enforced join/access before this screen mounted.
+    const accessConfirmed =
+      !!currentUser?.userID &&
+      (!isSingleConversationId(conversationId) ||
+        isConversationParticipant(conversationId, currentUser.userID));
+    // Must stay above useMessages (see useUnreadDeeplinkCheck).
+    const { unreadToken, unreadTokenRef, markChildNavigation } =
+      useUnreadIndicator({
+        conversationId,
+        isBotConversation: isBotThread,
+        targetMessageId,
+        accessConfirmed,
+      });
+
     const {
       messages,
       initLoading,
@@ -222,9 +247,34 @@ const ChatDetail = memo(
       });
     }, [currentUser, unpinMessage, customMessageItemFactory]);
 
+    // Library-initiated child navigation keeps the unread indicator across the
+    // blur it causes; markChildNavigation must run before the callback does.
     const handlePressMenu = useCallback(() => {
+      markChildNavigation();
       onPressMenu?.(conversationId);
-    }, [conversationId, onPressMenu]);
+    }, [conversationId, onPressMenu, markChildNavigation]);
+
+    const handlePressSearch = useMemo(
+      () =>
+        onPressSearch
+          ? (id: string) => {
+              markChildNavigation();
+              onPressSearch(id);
+            }
+          : undefined,
+      [onPressSearch, markChildNavigation]
+    );
+
+    const handlePressAddMember = useMemo(
+      () =>
+        onPressAddMember
+          ? () => {
+              markChildNavigation();
+              onPressAddMember();
+            }
+          : undefined,
+      [onPressAddMember, markChildNavigation]
+    );
 
     const handlePressJoinGroup = useCallback(() => {
       if (!conversation?.groupID) return;
@@ -248,8 +298,8 @@ const ChatDetail = memo(
           targetUserId={targetUserId}
           showAddMember={resolvedShowAddMember}
           onBack={onBack ?? handleBackDefault}
-          onPressSearch={onPressSearch}
-          onPressAddMember={onPressAddMember}
+          onPressSearch={handlePressSearch}
+          onPressAddMember={handlePressAddMember}
           onPressMenu={handlePressMenu}
           onPressAvatar={handlePressMenu}
         />
@@ -283,6 +333,9 @@ const ChatDetail = memo(
             dismissAreaTouchProps={dismissAreaTouchProps}
             isComposerPanelOpen={isComposerPanelOpen}
             onDismissAreaScrollBeginDrag={notifyScrollBeginDrag}
+            unreadToken={unreadToken}
+            unreadTokenRef={unreadTokenRef}
+            deeplinkTargetId={targetMessageId || undefined}
           />
         </TimelinePressGuardProvider>