@droppii-org/chat-mobile 0.2.109 → 0.2.110

package/src/screens/chat-detail/legend/LegendChatUnreadButton.tsx

@@ -0,0 +1,165 @@
+import { memo, useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KLabel,
+  KRadiusValue,
+} from '@droppii/libs';
+import { trans } from '../../../translation';
+
+const FADE = { duration: 200, easing: Easing.out(Easing.ease) };
+
+// Chevron cascade (D5): the bottom chevron leads and the top one follows, an
+// upward motion cue. Designer may tune these.
+const CYCLE_MS = 1200;
+const STEP_MS = CYCLE_MS / 4;
+const DIM = 0.35;
+const CHEVRON_SIZE = 14;
+
+// The touch target is real padded bounds, not `hitSlop`: a hitSlop reaching
+// outside the parent Animated.View is dead on Android. 23 + 2 * 11 = 45pt.
+const TOUCH_PAD_V = 11;
+const TOUCH_PAD_L = 8;
+// The pill itself sits 16 below the list top.
+const PILL_TOP = 16;
+
+const wave = () =>
+  withRepeat(
+    withSequence(
+      withTiming(DIM, { duration: STEP_MS }),
+      withTiming(1, { duration: STEP_MS })
+    ),
+    -1
+  );
+
+const UnreadChevrons = memo(() => {
+  const reducedMotion = useReducedMotion();
+  const top = useSharedValue(1);
+  const bottom = useSharedValue(1);
+
+  useEffect(() => {
+    if (reducedMotion) return;
+    bottom.value = wave();
+    top.value = withDelay(STEP_MS, wave());
+    return () => {
+      cancelAnimation(top);
+      cancelAnimation(bottom);
+    };
+  }, [reducedMotion, top, bottom]);
+
+  const topStyle = useAnimatedStyle(() => ({ opacity: top.value }));
+  const bottomStyle = useAnimatedStyle(() => ({ opacity: bottom.value }));
+
+  return (
+    <KContainer.View style={styles.chevrons}>
+      <Animated.View style={topStyle}>
+        <KImage.VectorIcons
+          name="angle-up-o"
+          size={CHEVRON_SIZE}
+          color={KColors.palette.gray.w900}
+        />
+      </Animated.View>
+      <Animated.View style={[styles.chevronOverlap, bottomStyle]}>
+        <KImage.VectorIcons
+          name="angle-up-o"
+          size={CHEVRON_SIZE}
+          color={KColors.palette.gray.w900}
+        />
+      </Animated.View>
+    </KContainer.View>
+  );
+});
+
+UnreadChevrons.displayName = 'UnreadChevrons';
+
+interface LegendChatUnreadButtonProps {
+  visible: boolean;
+  onPress?: () => void;
+}
+
+/** "Tin chưa đọc" half-pill, top-right of the list; jumps to the divider. */
+export const LegendChatUnreadButton = memo(
+  ({ visible, onPress }: LegendChatUnreadButtonProps) => {
+    const opacity = useSharedValue(0);
+
+    useEffect(() => {
+      opacity.value = withTiming(visible ? 1 : 0, FADE);
+    }, [visible, opacity]);
+
+    const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+
+    return (
+      <Animated.View
+        style={[styles.anchor, animatedStyle]}
+        // From the prop, not the animated opacity: deterministic on Old Arch.
+        pointerEvents={visible ? 'box-none' : 'none'}
+      >
+        <KContainer.Touchable
+          onPress={onPress}
+          activeOpacity={0.7}
+          style={styles.touchArea}
+          accessible
+          accessibilityRole="button"
+          accessibilityLabel={trans('chat:unread_jump_button')}
+        >
+          <KContainer.View style={styles.pill}>
+            {/* Mounted only while visible: a hidden pill runs no animation. */}
+            {visible && <UnreadChevrons />}
+            <KLabel.Text typo="TextXsMedium" color={KColors.palette.gray.w900}>
+              {trans('chat:unread_jump_button')}
+            </KLabel.Text>
+          </KContainer.View>
+        </KContainer.Touchable>
+      </Animated.View>
+    );
+  }
+);
+
+LegendChatUnreadButton.displayName = 'LegendChatUnreadButton';
+
+const styles = StyleSheet.create({
+  anchor: {
+    position: 'absolute',
+    top: PILL_TOP - TOUCH_PAD_V,
+    right: 0,
+    zIndex: 10,
+  },
+  touchArea: {
+    paddingVertical: TOUCH_PAD_V,
+    paddingLeft: TOUCH_PAD_L,
+  },
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    backgroundColor: KColors.palette.grayCool.w25,
+    borderWidth: 1,
+    borderRightWidth: 0,
+    borderColor: KColors.white,
+    borderTopLeftRadius: KRadiusValue.round,
+    borderBottomLeftRadius: KRadiusValue.round,
+  },
+  chevrons: {
+    width: CHEVRON_SIZE,
+    height: CHEVRON_SIZE,
+    justifyContent: 'center',
+  },
+  chevronOverlap: {
+    marginTop: -8,
+  },
+});

package/src/screens/chat-detail/legend/LegendChatUnreadDivider.tsx

@@ -0,0 +1,52 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  KColors,
+  KContainer,
+  KDivider,
+  KLabel,
+  KSpacingValue,
+} from '@droppii/libs';
+import { trans } from '../../../translation';
+
+const LINE_COLOR = KColors.opacity.grayDark[10];
+
+/**
+ * "TIN NHẮN CHƯA ĐỌC" row above the first unread message. Figma spacing: the
+ * previous row's 8 bottom margin + 8 top margin + 4 padding = 20 above the
+ * lines; 4 padding + 12 bottom margin + the time label's 8 = 24 below.
+ */
+export const LegendChatUnreadDivider = memo(() => (
+  <KContainer.View
+    row
+    center
+    paddingH="1rem"
+    paddingV="0.25rem"
+    style={styles.root}
+    accessible
+    accessibilityLabel={trans('chat:unread_divider')}
+  >
+    <KContainer.View flex>
+      <KDivider type="line" size="hairline" background={LINE_COLOR} />
+    </KContainer.View>
+    <KLabel.Text
+      typo="TextXsBold"
+      color={KColors.palette.gray.w200}
+      marginH="1rem"
+    >
+      {trans('chat:unread_divider')}
+    </KLabel.Text>
+    <KContainer.View flex>
+      <KDivider type="line" size="hairline" background={LINE_COLOR} />
+    </KContainer.View>
+  </KContainer.View>
+));
+
+LegendChatUnreadDivider.displayName = 'LegendChatUnreadDivider';
+
+const styles = StyleSheet.create({
+  root: {
+    marginTop: KSpacingValue['0.5rem'],
+    marginBottom: KSpacingValue['0.75rem'],
+  },
+});

package/src/services/message.ts

@@ -5,9 +5,16 @@ import OpenIMSDK, {
 } from '@droppii/openim-rn-client-sdk';
 import { useConversationStore } from '../store';
 import { getReceiverId } from '../utils/message';
+import { perfMark } from '../utils/perf-marker';
+import { withTimeout } from '../utils/promise';
 
 const DEFAULT_PAGE_SIZE = 20;
 
+// Rendering never waits on this, only the read receipt does, while a timeout
+// loses the indicator for good. Tune from the measured p95 of
+// `unread_anchor_response.ms` before release.
+export const FIRST_UNREAD_TIMEOUT_MS = 5000;
+
 export type HistoryMessageResult = AdvancedGetMessageResult & {
   lastMinSeq?: number;
 };
@@ -78,6 +85,41 @@ export namespace ChatMessageAPI {
     ]);
   }
 
+  /**
+   * First unread message of the conversation, or `null` when there is none,
+   * the call fails, or it times out. Never throws. The server records the
+   * conversation's open time on this call, so callers invoke it once per
+   * visit.
+   */
+  export async function getFirstUnreadMessage(
+    conversationID: string,
+    timeoutMs = FIRST_UNREAD_TIMEOUT_MS
+  ): Promise<MessageItem | null> {
+    const startedAt = Date.now();
+    try {
+      perfMark('unread_anchor_request');
+      const res = await withTimeout(
+        OpenIMSDK.getFirstUnreadMessage(conversationID),
+        timeoutMs
+      );
+      perfMark('unread_anchor_response', {
+        found: !!res?.message,
+        ms: Date.now() - startedAt,
+      });
+      return res?.message ?? null;
+    } catch (error) {
+      try {
+        perfMark('unread_anchor_response', {
+          found: false,
+          failed: true,
+          ms: Date.now() - startedAt,
+        });
+      } catch {}
+      if (__DEV__) console.log('[unread] getFirstUnreadMessage failed', error);
+      return null;
+    }
+  }
+
   export async function getCurrentUserId() {
     return OpenIMSDK.getLoginUserID();
   }

package/src/store/message.ts

@@ -96,6 +96,8 @@ export const useMessageStore = create<MessageStore>()((set, get) => ({
             ? mergeMessages(state.messages, res.messageList || [])
             : res.messageList || [],
           hasMoreOld: !res.isEnd,
+          // A fresh fetch is the newest page (FAB out of a jump window).
+          ...(loadMore ? {} : { hasMoreNew: false }),
           initLoading: false,
           moreOldLoading: false,
         }));
@@ -153,8 +155,11 @@ export const useMessageStore = create<MessageStore>()((set, get) => ({
     applicationType,
     conversationId,
     startClientMsgId,
+    scrollOptions,
   }: ISearchMessagesParams) => {
     if (!conversationId || !startClientMsgId) return;
+    // Opted out of the toast-and-exit: the caller handles a missing target.
+    const keepOnUnavailable = scrollOptions?.exitOnUnavailable === false;
     try {
       set({ initLoading: true });
       const searchPrevParams = {
@@ -200,6 +205,17 @@ export const useMessageStore = create<MessageStore>()((set, get) => ({
           ],
           []
         );
+        const targetMessage = newMessages.find(
+          (msg) => msg.clientMsgID === startClientMsgId
+        );
+
+        // Not in the local DB: keep the current window rather than swapping
+        // in one around a target that isn't there.
+        if (!targetMessage && keepOnUnavailable) {
+          set({ initLoading: false });
+          return;
+        }
+
         set({
           messages: newMessages,
           hasMoreOld: !searchPrevRes.isEnd,
@@ -207,18 +223,20 @@ export const useMessageStore = create<MessageStore>()((set, get) => ({
           initLoading: false,
         });
 
-        const targetMessage = newMessages.find(
-          (msg) => msg.clientMsgID === startClientMsgId
-        );
-
         if (!targetMessage || isMessageRevoked(targetMessage)) {
-          DeviceEventEmitter.emit(ChatEvent.TargetMessageUnavailable);
+          if (!keepOnUnavailable) {
+            DeviceEventEmitter.emit(ChatEvent.TargetMessageUnavailable);
+          }
           return;
         }
 
+        if (scrollOptions?.reemitAfterSearch === false) return;
+
         await new Promise((resolve) => setTimeout(resolve, 300));
         DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
+          ...scrollOptions,
           clientMessageId: startClientMsgId,
+          fromSearch: true,
         });
       }
     } catch (error) {

package/src/store/unreadIndicator.ts

@@ -0,0 +1,38 @@
+import { create } from 'zustand';
+import type { UnreadIndicatorStore } from '../types/unreadIndicator';
+import {
+  INITIAL_UNREAD_INDICATOR_STATE,
+  beginUnreadSession,
+  clearUnreadSession,
+  confirmUnreadDeeplinkCheck,
+  dismissUnreadPill,
+  rearmUnreadDeeplinkCheck,
+  resetUnreadSession,
+  resolveUnreadSession,
+} from '../utils/unreadIndicatorState';
+
+/**
+ * Unread-indicator session for ChatDetail. A dedicated store rather than a
+ * slice of `useMessageStore`, whose `reset()` also runs on a deeplink target
+ * change. Module scope on purpose: the session outlives remounts of
+ * ChatDetail inside the same route (access re-check, SDK reconnect). Internal —
+ * not exported from `store/index.ts`.
+ */
+export const useUnreadIndicatorStore = create<UnreadIndicatorStore>()(
+  (set, get) => ({
+    ...INITIAL_UNREAD_INDICATOR_STATE,
+    begin: (options) => {
+      set((s) => beginUnreadSession(s, options, Date.now()));
+      return get().token;
+    },
+    resolve: (token, anchor) =>
+      set((s) => resolveUnreadSession(s, token, anchor)),
+    clear: (token) => set((s) => clearUnreadSession(s, token)),
+    dismissPill: (token) => set((s) => dismissUnreadPill(s, token)),
+    confirmDeeplinkCheck: (token, hide) =>
+      set((s) => confirmUnreadDeeplinkCheck(s, token, hide)),
+    rearmDeeplinkCheck: (token) =>
+      set((s) => rearmUnreadDeeplinkCheck(s, token)),
+    reset: () => set((s) => resetUnreadSession(s)),
+  })
+);

package/src/translation/resources/i18n.ts

@@ -39,6 +39,8 @@ const i18nKey: Record<string, string> = {
   'chat:copy_message_link_success': 'Sao chép đường dẫn tin nhắn thành công',
   'chat:target_message_unavailable':
     'Tin nhắn có thể đã bị xoá và không còn tồn tại',
+  'chat:unread_divider': 'TIN NHẮN CHƯA ĐỌC',
+  'chat:unread_jump_button': 'Tin chưa đọc',
   'chat:retry_message': 'Gửi lại',
   'chat:revoke_message': 'Thu hồi',
   'chat:pin_message': 'Ghim',

package/src/types/chat.ts

@@ -16,6 +16,7 @@ import type {
   IRunConversationFlowPayload,
 } from './flows';
 import type { GetOpenIMTokenResponse } from './auth';
+import type { ScrollToMessageOptions } from './events';
 import type { ChatDetailProps } from '../screens/chat-detail';
 
 export const EventProvider = {
@@ -213,6 +214,8 @@ export interface ISearchMessagesParams {
   applicationType: DChatApplicationType;
   conversationId?: string;
   startClientMsgId: string;
+  /** Carried from the ScrollToMessage that triggered the search. */
+  scrollOptions?: ScrollToMessageOptions;
 }
 
 export interface MessageStore {

package/src/types/events.ts

@@ -9,8 +9,25 @@ export enum ChatEvent {
   TargetMessageUnavailable = 'chat:target_message_unavailable',
 }
 
-export interface ScrollToMessagePayload {
+export interface ScrollToMessageOptions {
+  /** Default true: highlight the target for 5s after landing. */
+  highlight?: boolean;
+  /** Default 0.5 (centred). */
+  viewPosition?: number;
+  viewOffset?: number;
+  /** Default true: an unavailable target toasts and navigates back. */
+  exitOnUnavailable?: boolean;
+  /**
+   * Default true. False: an out-of-window jump loads the window but doesn't
+   * re-emit, because the caller re-resolves its own target.
+   */
+  reemitAfterSearch?: boolean;
+}
+
+export interface ScrollToMessagePayload extends ScrollToMessageOptions {
   clientMessageId: string;
+  /** @internal Set on post-search emits; stops a re-search loop. */
+  fromSearch?: boolean;
 }
 
 export interface MessageRevokedPayload {

package/src/types/unreadIndicator.ts

@@ -0,0 +1,49 @@
+// Internal to the library (not re-exported from `src/index.tsx`).
+
+/** The validated first-unread message of a thread. */
+export interface UnreadAnchor {
+  clientMsgID: string;
+  seq: number;
+}
+
+/**
+ * One unread-indicator session per route visit. `token` identifies the
+ * session: every mutation after `begin` names the token it was issued for and
+ * is a no-op otherwise, so two ChatDetail instances of the same thread can't
+ * touch each other's session.
+ */
+export interface UnreadIndicatorState {
+  token: number;
+  routeKey?: string;
+  conversationId?: string;
+  /** The `getFirstUnreadMessage` lookup is in flight (mark-read gate). */
+  pending: boolean;
+  pendingSince: number;
+  anchor: UnreadAnchor | null;
+  pillDismissed: boolean;
+  /** Deeplink entry: hide the indicator until the D11 rule is decided. */
+  awaitingDeeplinkCheck: boolean;
+  /**
+   * How the lookup phase ended: `resolve` (answered), `clear` (left the
+   * screen — blur), `hide` (D11 deeplink rule hid it; the user is still here).
+   */
+  settledBy: 'resolve' | 'clear' | 'hide' | null;
+}
+
+export interface BeginUnreadSessionOptions {
+  routeKey: string;
+  conversationId: string;
+  /** Bot threads: no lookup, no indicator, gate open. */
+  skip: boolean;
+  awaitDeeplinkCheck: boolean;
+}
+
+export interface UnreadIndicatorStore extends UnreadIndicatorState {
+  begin: (options: BeginUnreadSessionOptions) => number;
+  resolve: (token: number, anchor: UnreadAnchor | null) => void;
+  clear: (token: number) => void;
+  dismissPill: (token: number) => void;
+  confirmDeeplinkCheck: (token: number, hide: boolean) => void;
+  rearmDeeplinkCheck: (token: number) => void;
+  reset: () => void;
+}

package/src/utils/markReadPolicy.ts

@@ -0,0 +1,55 @@
+/**
+ * When ChatDetail may mark the conversation read. Since OpenIM rc43 every
+ * call is a server round-trip (two SDK requests), so it's edge-triggered and
+ * throttled instead of fired on every scroll event. Pure, for unit tests.
+ */
+
+export type MarkReadReason =
+  | 'list-load'
+  | 'reached-bottom'
+  | 'incoming'
+  | 'fab'
+  | 'window-reload'
+  | 'focus'
+  | 'app-active'
+  | 'gate-open'
+  | 'leave';
+
+export interface MarkReadInput {
+  reason: MarkReadReason;
+  /** The unread lookup hasn't answered yet (its anchor must be captured first). */
+  gateClosed: boolean;
+  focused: boolean;
+  appActive: boolean;
+  listLoaded: boolean;
+  /** The window isn't at the newest message (deeplink / jump window). */
+  hasMoreNew: boolean;
+  atBottom: boolean;
+  isDeeplinkFirstLoad: boolean;
+  /** A mark-read became due while the screen was focused. */
+  dirtyWhileFocused: boolean;
+}
+
+/** A list (re)load just landed — not something the user did. */
+export const isListLoadReason = (reason: MarkReadReason): boolean =>
+  reason === 'list-load' || reason === 'window-reload';
+
+export const shouldRequestMarkRead = (input: MarkReadInput): boolean => {
+  const atTrueEnd = input.listLoaded && !input.hasMoreNew && input.atBottom;
+  // The user saw it and is leaving: gate and focus no longer matter, but a
+  // message that only arrived while blurred must not be marked read.
+  if (input.reason === 'leave') return atTrueEnd && input.dirtyWhileFocused;
+  if (isListLoadReason(input.reason) && input.isDeeplinkFirstLoad) {
+    return false;
+  }
+  return !input.gateClosed && input.focused && input.appActive && atTrueEnd;
+};
+
+export const MARK_READ_THROTTLE_MS = 1000;
+
+/** 0 → call now; otherwise the delay of the trailing call. */
+export const nextMarkReadDelay = (
+  now: number,
+  lastCallAt: number,
+  throttleMs = MARK_READ_THROTTLE_MS
+): number => Math.max(0, lastCallAt + throttleMs - now);

package/src/utils/promise.ts

@@ -16,3 +16,23 @@ export const allSettled = <T extends readonly unknown[]>(
         .catch((reason) => ({ status: 'rejected' as const, reason }))
     )
   ) as 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 const withTimeout = <T>(promise: Promise<T>, ms: number): Promise<T> =>
+  new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error('timeout')), ms);
+    promise.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (error) => {
+        clearTimeout(timer);
+        reject(error);
+      }
+    );
+  });

package/src/utils/unreadAnchor.ts

@@ -0,0 +1,87 @@
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import type { UnreadAnchor } from '../types/unreadIndicator';
+import {
+  getGroupIdFromConversationId,
+  isConversationParticipant,
+  isSingleConversationId,
+} from './conversation';
+
+/** Height of the divider at the top of the anchor row (Figma: 27px). */
+export const UNREAD_DIVIDER_HEIGHT = 27;
+
+export const messageBelongsToConversation = (
+  message: Pick<MessageItem, 'sendID' | 'recvID' | 'groupID'>,
+  conversationId: string
+): boolean =>
+  isSingleConversationId(conversationId)
+    ? isConversationParticipant(conversationId, message.sendID) &&
+      isConversationParticipant(conversationId, message.recvID)
+    : !!message.groupID &&
+      getGroupIdFromConversationId(conversationId) === message.groupID;
+
+/**
+ * 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 const toUnreadAnchor = (
+  message: MessageItem | null | undefined,
+  conversationId: string
+): UnreadAnchor | null => {
+  if (!message) return null;
+  const { clientMsgID, seq } = message;
+  if (typeof clientMsgID !== 'string' || !clientMsgID) return null;
+  if (typeof seq !== 'number' || !Number.isFinite(seq) || seq <= 0) {
+    return null;
+  }
+  if (!messageBelongsToConversation(message, conversationId)) return null;
+  return { clientMsgID, seq };
+};
+
+/**
+ * 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 const resolveUnreadAnchorRowId = (
+  rendered: readonly MessageItem[],
+  anchor: UnreadAnchor | null,
+  window: { oldestLoadedSeq: number; hasMoreOld: boolean }
+): string | null => {
+  if (!anchor || rendered.length === 0) return null;
+  const boundaryLoaded =
+    !window.hasMoreOld ||
+    (window.oldestLoadedSeq > 0 && window.oldestLoadedSeq <= anchor.seq);
+  if (!boundaryLoaded) return null;
+  const row = rendered.find(
+    (m) =>
+      m.clientMsgID === anchor.clientMsgID || (m.seq > 0 && m.seq >= anchor.seq)
+  );
+  return row ? row.clientMsgID || row.serverMsgID || null : 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 const isRowTopInViewport = (
+  rowTop: number | undefined,
+  scroll: number,
+  scrollLength: number,
+  minVisiblePx = UNREAD_DIVIDER_HEIGHT
+): boolean =>
+  rowTop != null &&
+  rowTop >= scroll &&
+  rowTop + minVisiblePx <= scroll + scrollLength;
+
+/** D11: a deeplink to a message older than the first unread hides the indicator. */
+export const isDeeplinkTargetBeforeAnchor = (
+  targetSeq?: number,
+  anchorSeq?: number
+): boolean =>
+  !!targetSeq && !!anchorSeq && targetSeq > 0 && targetSeq < anchorSeq;