@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/src/social/features/chat/features/shared/hooks/useBubbleMenu.tsx

@@ -0,0 +1,165 @@
+// useBubbleMenu — ported from AmityUiKitWeb v4/chat/features/shared/hooks/useBubbleMenu.
+// Holds the message action-menu state and the per-action handlers. In RN the menu
+// is long-press triggered (see components/AmityMessageActionMenu) rather than
+// anchored to a DOM node, so `anchor` is kept optional and loosely typed.
+//
+// RN adaptations from web (return shape UseBubbleMenuReturn preserved verbatim so
+// useChatMessage consumes it unchanged):
+//   - Delete goes through the RN `useDeleteMessageQuery` port, which confirms via
+//     the platform `Alert` before deleting (web used ConfirmProvider's modal).
+//   - Copy uses `@react-native-clipboard/clipboard` (`Clipboard.setString`, sync)
+//     instead of `navigator.clipboard.writeText`; the copied-success toast fires
+//     through the useChatNotifications stub.
+//   - Save has no RN infra yet (web's `useSaveMediaMessageQuery`) — `handleBubbleSave`
+//     is a documented stub.
+//   - Report: web opened a Drawer (mobile) / Popup (desktop) with ContentReportReason.
+//     RN keeps the report target in local state (`reportMessage`) and the orchestrator
+//     (useChatMessage) surfaces it so Chat/GroupChat render the full-screen
+//     ContentReportReason Modal — the same overlay pattern as see-more (BUG: PDT-4007,
+//     the report UI previously appeared as a partial bottom sheet / no-op).
+//   - Reactor-list sheet has no RN component wired here (web opened a Drawer/Popup with
+//     MessageReactorListSheet) — `handleOpenReactorListSheet` is a documented stub;
+//     Chat/GroupChat open the reactor list via the global bottom sheet instead.
+
+import { useState } from 'react';
+
+import Clipboard from '@react-native-clipboard/clipboard';
+
+import { useString } from '../../../../../../core/localization';
+import { useDeleteMessageQuery } from '../../../hooks/queries';
+import { useChatNotifications } from '../../../hooks/useChatNotifications';
+
+type BubbleMenuState = {
+  message: Amity.Message;
+  anchor?: unknown;
+};
+
+type UseBubbleMenuParams = {
+  onEditMessage: (message: Amity.Message) => void;
+  onReplyMessage: (message: Amity.Message) => void;
+  viewerIsMutedInChannel?: boolean;
+};
+
+export type UseBubbleMenuReturn = {
+  bubbleMenu: BubbleMenuState | null;
+  openBubbleMenu: (message: Amity.Message, anchor?: unknown) => void;
+  closeBubbleMenu: () => void;
+  handleBubbleDelete: () => void;
+  handleBubbleEdit: () => void;
+  handleBubbleReply: () => void;
+  handleBubbleCopy: () => Promise<void>;
+  handleBubbleSave: () => void;
+  handleBubbleReport: (message: Amity.Message) => void;
+  handleOpenReactorListSheet: (message: Amity.Message) => void;
+  // The message pending report (drives the ContentReportReason Modal), and its closer.
+  reportMessage: Amity.Message | null;
+  closeReport: () => void;
+  viewerIsMutedInChannel: boolean;
+};
+
+// Mirrors web's chat/utils/getClipboardPayload (inlined; no RN chat/utils dir yet).
+function getClipboardPayload(message: Amity.Message): string | null {
+  if (message.dataType === 'text') {
+    const data = message.data as Amity.Message<'text'>['data'];
+    return data?.text ?? '';
+  }
+  if (message.dataType === 'custom') {
+    const data = (message as Amity.Message<'custom'>).data;
+    if (data == null) return null;
+    if (typeof data === 'string') return data;
+    return JSON.stringify(data);
+  }
+  return null;
+}
+
+export function useBubbleMenu({
+  onEditMessage,
+  onReplyMessage,
+  viewerIsMutedInChannel = false,
+}: UseBubbleMenuParams): UseBubbleMenuReturn {
+  const { success } = useChatNotifications();
+  const copiedToast = useString('amity_chat_toast_copied');
+  const [bubbleMenu, setBubbleMenu] = useState<BubbleMenuState | null>(null);
+  const [reportMessage, setReportMessage] = useState<Amity.Message | null>(
+    null
+  );
+
+  function closeBubbleMenu() {
+    setBubbleMenu(null);
+  }
+
+  const { requestDelete } = useDeleteMessageQuery();
+
+  function openBubbleMenu(message: Amity.Message, anchor?: unknown) {
+    setBubbleMenu({ message, anchor });
+  }
+
+  function handleBubbleDelete() {
+    if (!bubbleMenu) return;
+    const message = bubbleMenu.message;
+    closeBubbleMenu();
+    requestDelete(message);
+  }
+
+  function handleBubbleEdit() {
+    if (!bubbleMenu) return;
+    const message = bubbleMenu.message;
+    closeBubbleMenu();
+    onEditMessage(message);
+  }
+
+  function handleBubbleReply() {
+    if (!bubbleMenu) return;
+    const message = bubbleMenu.message;
+    closeBubbleMenu();
+    onReplyMessage(message);
+  }
+
+  async function handleBubbleCopy() {
+    if (!bubbleMenu) return;
+    const message = bubbleMenu.message;
+    closeBubbleMenu();
+
+    const payload = getClipboardPayload(message);
+    if (payload) {
+      Clipboard.setString(payload);
+      success({ content: copiedToast, alignment: 'with-composer' });
+    }
+  }
+
+  function handleBubbleSave() {
+    if (!bubbleMenu) return;
+    closeBubbleMenu();
+    // TODO: no RN media-save infra yet (web's useSaveMediaMessageQuery). Stubbed.
+  }
+
+  function handleBubbleReport(message: Amity.Message) {
+    // Open the full-screen ContentReportReason Modal (rendered by Chat/GroupChat).
+    setReportMessage(message);
+  }
+
+  function closeReport() {
+    setReportMessage(null);
+  }
+
+  function handleOpenReactorListSheet(_message: Amity.Message) {
+    closeBubbleMenu();
+    // TODO: no RN MessageReactorListSheet yet (web opened a Drawer/Popup). Stubbed.
+  }
+
+  return {
+    bubbleMenu,
+    openBubbleMenu,
+    closeBubbleMenu,
+    handleBubbleDelete,
+    handleBubbleEdit,
+    handleBubbleReply,
+    handleBubbleCopy,
+    handleBubbleSave,
+    handleBubbleReport,
+    handleOpenReactorListSheet,
+    reportMessage,
+    closeReport,
+    viewerIsMutedInChannel,
+  };
+}

package/src/social/features/chat/features/shared/hooks/useChatMessage.ts

@@ -0,0 +1,303 @@
+// useChatMessage — ported from AmityUiKitWeb v4/chat/features/shared/hooks/useChatMessage.
+// The conversation orchestration hook: owns the message list (grouped into date-
+// separated items + optimistic synthetic messages), the composer, the bubble action
+// menu, the media viewers, the failed-message sheet, see-more state, scroll state
+// (atBottom / newMessage), edit state, and mark-as-read. Chat.tsx wires the returned
+// values into the components with these exact props.
+//
+// RN adaptations vs web: web react-query useMessageCollection → RN useMessagesCollection
+// (direct live collection); jump-to-message (aroundMessageId/hasPrev/loadPrev) is out of
+// scope for M2 and stubbed; loading/error toasts go through the useChatNotifications stub.
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  SubChannelRepository,
+  getSubChannelTopic,
+  subscribeTopic,
+} from '@amityco/ts-sdk-react-native';
+
+import { useMessagesCollection } from '../../../hooks/collections/useMessagesCollection';
+import {
+  useChatNavigation,
+  useChatNotifications,
+  useCurrentUserId,
+  useNetworkOnline,
+} from '../../../hooks';
+import { useString } from '../../../../../../core/localization';
+import {
+  groupMessagesByDate,
+  type ChatItem,
+} from '../../../utils/groupMessagesByDate';
+import { useMarkAsRead } from './useMarkAsRead';
+import {
+  useMessageComposer,
+  isSyntheticPendingMessage,
+} from './useMessageComposer';
+import { useBubbleMenu } from './useBubbleMenu';
+import { useFailedMessageSheet } from './useFailedMessageSheet';
+import { useMediaViewer } from './useMediaViewer';
+
+type UseChatMessageParams = {
+  channelId: string | undefined;
+  isJustCreated?: boolean;
+  enableMention?: boolean;
+  viewerIsMutedInChannel?: boolean;
+};
+
+export function useChatMessage({
+  channelId,
+  isJustCreated,
+  enableMention = false,
+  viewerIsMutedInChannel = false,
+}: UseChatMessageParams) {
+  const { pop } = useChatNavigation();
+  const { online: isOnline } = useNetworkOnline();
+  const {
+    error: errorToast,
+    loading: showLoadingToast,
+    remove: removeToast,
+  } = useChatNotifications();
+  const currentUserId = useCurrentUserId();
+  const loadErrorToast = useString('amity_chat_load_error');
+  const loadingLabel = useString('amity_chat_loading_label');
+  const prevLatestIdRef = useRef<string | null>(null);
+  // Guards show-once/remove-once for the loading toast (mirrors web's
+  // `loadingToastIdRef`); RN's toast is a singleton with no ids.
+  const loadingToastShownRef = useRef(false);
+  const [atBottom, setAtBottom] = useState(true);
+  const [seeMore, setSeeMore] = useState<{
+    text: string;
+    title?: string;
+  } | null>(null);
+  const [newMessage, setNewMessage] = useState<Amity.Message | null>(null);
+  const [editingMessage, setEditingMessage] = useState<Amity.Message | null>(
+    null
+  );
+
+  const {
+    messages,
+    loading,
+    hasNextPage,
+    loadMore,
+    error: loadError,
+  } = useMessagesCollection(
+    { subChannelId: channelId ?? '', limit: 20, includeDeleted: true },
+    !!channelId
+  );
+
+  const isLoadingFirstPage = !!channelId && loading && messages.length === 0;
+
+  const closeEditMessage = useCallback(() => setEditingMessage(null), []);
+
+  const composer = useMessageComposer({
+    subChannelId: channelId ?? '',
+    enableMention,
+    editingMessage,
+    onEditCompleted: closeEditMessage,
+  });
+
+  // Newest-first date-separated items (inverted list), with optimistic synthetic
+  // pending messages prepended (they sit at the bottom of the inverted view).
+  const items: ChatItem[] = useMemo(() => {
+    // The live collection can momentarily hold the same messageId twice (pagination
+    // merges, optimistic→real overlap). Dedupe so the list never renders two items
+    // with the same key.
+    const seen = new Set<string>();
+    const deduped = messages.filter((m) => {
+      if (!m.messageId || seen.has(m.messageId)) return false;
+      seen.add(m.messageId);
+      return true;
+    });
+    const chronological = deduped.sort(
+      (a, b) =>
+        new Date(a.createdAt as string).getTime() -
+        new Date(b.createdAt as string).getTime()
+    );
+    const base = groupMessagesByDate(chronological).reverse();
+    if (composer.syntheticMessages.length === 0) return base;
+    const synthetic: ChatItem[] = composer.syntheticMessages
+      .slice()
+      .reverse()
+      .map((m) => ({
+        kind: 'message' as const,
+        id: `synthetic-${m.__syntheticClientId}`,
+        message: m as unknown as Amity.Message,
+      }));
+    return [...synthetic, ...base];
+  }, [messages, composer.syntheticMessages]);
+
+  // The newest message BY createdAt — NOT messages[length-1]. The SDK collection
+  // is newest-first and paginating older pages appends to the end, so [length-1]
+  // is the oldest loaded message and changes on scroll-up; using it made the
+  // new-message banner fire on plain scroll (QA #0/#11). Max-by-createdAt is
+  // order-independent, so it only changes when a genuinely newer message arrives.
+  const latestMessage = useMemo(() => {
+    if (messages.length === 0) return null;
+    return messages.reduce((a, b) =>
+      new Date(b.createdAt as string).getTime() >
+      new Date(a.createdAt as string).getTime()
+        ? b
+        : a
+    );
+  }, [messages]);
+
+  const {
+    bubbleMenu,
+    openBubbleMenu,
+    closeBubbleMenu,
+    handleBubbleDelete,
+    handleBubbleEdit,
+    handleBubbleReply,
+    handleBubbleCopy,
+    handleBubbleSave,
+    handleBubbleReport,
+    handleOpenReactorListSheet,
+    reportMessage,
+    closeReport,
+  } = useBubbleMenu({
+    onEditMessage: setEditingMessage,
+    onReplyMessage: composer.startReply,
+    viewerIsMutedInChannel,
+  });
+
+  const { openFailedSheet } = useFailedMessageSheet({
+    onRetryUpload: composer.handleRetryUpload,
+    onDiscardUpload: composer.handleDiscardUpload,
+    onRetryText: composer.handleRetryText,
+    onDiscardText: composer.handleDiscardText,
+  });
+
+  const {
+    openImageViewer,
+    openVideoPlayer,
+    imageViewerProps,
+    videoPlayerProps,
+  } = useMediaViewer();
+
+  useMarkAsRead({
+    latestMessage,
+    atBottom,
+    enabled: !!channelId && !!latestMessage,
+  });
+
+  useEffect(() => {
+    if (loadError) errorToast({ content: loadErrorToast });
+  }, [loadError, errorToast, loadErrorToast]);
+
+  // Cross-device real-time messages. The `getMessages` live collection only
+  // reflects the LOCAL SDK cache (own sends, edits) — other users' messages do
+  // not arrive live unless we subscribe to the subchannel topic while the thread
+  // is open (SDK realtime docs: "Subscribe when the thread screen becomes active").
+  // Web's ts-sdk auto-subscribes inside getMessages; the RN ts-sdk-react-native
+  // does NOT (verified on-device: only the read-marker topic subscribes otherwise),
+  // so we subscribe explicitly here and unsubscribe on unmount / channel change.
+  useEffect(() => {
+    if (!channelId) return undefined;
+    let unsubscribeTopic: (() => void) | undefined;
+    const unsubscribeObject = SubChannelRepository.getSubChannel(
+      channelId,
+      ({ data: subChannel, loading: subLoading }) => {
+        if (subLoading || !subChannel || unsubscribeTopic) return;
+        unsubscribeTopic = subscribeTopic(getSubChannelTopic(subChannel));
+      }
+    );
+    return () => {
+      unsubscribeTopic?.();
+      unsubscribeObject();
+    };
+  }, [channelId]);
+
+  // Web useChatMessage shows a loading toast ("Loading chat...") while the first
+  // page loads and removes it once loaded (duration 60s = upper bound). RN's toast
+  // is a singleton (no ids), so the ref guards show-once/remove-once — correct
+  // regardless of the fresh notification-fn identities returned each render, which
+  // is why `showLoadingToast`/`removeToast` are intentionally out of the deps.
+  useEffect(() => {
+    if (isLoadingFirstPage) {
+      if (loadingToastShownRef.current) return;
+      loadingToastShownRef.current = true;
+      // Web shows this above the composer (useChatMessage: alignment 'with-composer').
+      showLoadingToast({
+        content: loadingLabel,
+        duration: 60_000,
+        alignment: 'with-composer',
+      });
+    } else if (loadingToastShownRef.current) {
+      loadingToastShownRef.current = false;
+      removeToast();
+    }
+  }, [isLoadingFirstPage, channelId]);
+
+  // Clear a lingering loading toast if the screen unmounts mid-load (singleton toast).
+  useEffect(() => {
+    return () => {
+      if (loadingToastShownRef.current) {
+        loadingToastShownRef.current = false;
+        removeToast();
+      }
+    };
+  }, []);
+
+  // Surface a "new message" pill when a message arrives while scrolled up.
+  useEffect(() => {
+    const currentId = latestMessage?.messageId ?? null;
+    const prevId = prevLatestIdRef.current;
+    prevLatestIdRef.current = currentId;
+    if (!currentId || !prevId || currentId === prevId) return;
+    if (atBottom) return;
+    setNewMessage(latestMessage);
+  }, [latestMessage?.messageId, atBottom, latestMessage]);
+
+  useEffect(() => {
+    if (atBottom) setNewMessage(null);
+  }, [atBottom]);
+
+  const clearNewMessage = useCallback(() => setNewMessage(null), []);
+  const openSeeMore = useCallback(
+    (text: string, title?: string) => setSeeMore({ text, title }),
+    []
+  );
+  const closeSeeMore = useCallback(() => setSeeMore(null), []);
+
+  return {
+    currentUserId,
+    items,
+    isLoadingFirstPage,
+    isLoading: loading,
+    hasMore: hasNextPage,
+    loadMore,
+    latestMessage,
+    isOnline,
+    atBottom,
+    setAtBottom,
+    seeMore,
+    openSeeMore,
+    closeSeeMore,
+    newMessage,
+    clearNewMessage,
+    viewerIsMutedInChannel,
+    handleBack: pop,
+    composer,
+    bubbleMenu,
+    openBubbleMenu,
+    closeBubbleMenu,
+    handleBubbleDelete,
+    handleBubbleEdit,
+    handleBubbleReply,
+    handleBubbleCopy,
+    handleBubbleSave,
+    handleBubbleReport,
+    handleOpenReactorListSheet,
+    reportMessage,
+    closeReport,
+    editingMessage,
+    closeEditMessage,
+    openFailedSheet,
+    openImageViewer,
+    openVideoPlayer,
+    imageViewerProps,
+    videoPlayerProps,
+    isJustCreated,
+    isSyntheticPendingMessage,
+  };
+}

package/src/social/features/chat/features/shared/hooks/useFailedMessageSheet.tsx

@@ -0,0 +1,143 @@
+// useFailedMessageSheet — ported from AmityUiKitWeb v4/chat/features/shared/hooks/useFailedMessageSheet.
+// Presents the "message failed to send" action sheet (Resend / Delete) and wires
+// the retry/discard callbacks. The return shape (UseFailedMessageSheetReturn) is
+// preserved verbatim from web so useChatMessage consumes it unchanged.
+//
+// RN adaptation from web:
+//   - Web opened a bottom Drawer holding a `Menu` (Resend / Delete). RN presents
+//     the same Menu in the repo's global @devvie bottom sheet (`useBottomSheet` →
+//     BottomSheetComponent) with `container="drawer"` — the identical pattern the
+//     conversation user-action menu uses. NOT an Alert dialog.
+//   - Non-synthetic delete/resend use the existing RN `useDeleteMessage` /
+//     `useCreateMessage` mutations instead of web's query hooks (resend = recreate
+//     the message, then delete the original — same as web's useResendMessageQuery).
+
+import { StyleSheet, View } from 'react-native';
+
+import { Menu } from '../../../../../../core/design/components/Menu';
+import { useString } from '../../../../../../core/localization';
+import { useBottomSheet } from '../../../../../../core/stores/slices/bottomSheetSlice';
+import { useChatNotifications } from '../../../hooks/useChatNotifications';
+import { useDeleteMessage } from '../../../hooks/useDeleteMessage';
+import { useCreateMessage } from '../../../hooks/useCreateMessage';
+import { isSyntheticPendingMessage } from './useMessageComposer';
+
+type UseFailedMessageSheetParams = {
+  onRetryUpload: (clientId: string) => void;
+  onDiscardUpload: (clientId: string) => void;
+  onRetryText: (clientId: string) => void;
+  onDiscardText: (clientId: string) => void;
+};
+
+export type UseFailedMessageSheetReturn = {
+  openFailedSheet: (message: Amity.Message) => void;
+};
+
+export function useFailedMessageSheet({
+  onRetryUpload,
+  onDiscardUpload,
+  onRetryText,
+  onDiscardText,
+}: UseFailedMessageSheetParams): UseFailedMessageSheetReturn {
+  const { openBottomSheet, closeBottomSheet, bottomSheetHeight } =
+    useBottomSheet();
+  const { error: errorToast } = useChatNotifications();
+  const { deleteMessage } = useDeleteMessage();
+  // LEADS WEB (deaad473): web's requestResend has no onError, so a resend that
+  // fails again is silent there. RN surfaces it.
+  // useCreateMessage maps the SDK error to localized copy but only through its
+  // onError callback. Nothing passed one, so a resend that failed again was
+  // completely silent here too — and mutateAsync's rejection went unhandled on
+  // top. Revisit if web adds its own handling, so the two don't diverge further.
+  const { createMessage } = useCreateMessage({
+    onError: (errorMsg) => errorToast({ content: errorMsg }),
+  });
+  const resendLabel = useString('amity_chat_message_resend');
+  const deleteLabel = useString('amity_chat_option_delete');
+
+  async function handleResend(message: Amity.Message) {
+    if (isSyntheticPendingMessage(message)) {
+      if (message.dataType === 'text') {
+        onRetryText(message.__syntheticClientId);
+      } else {
+        onRetryUpload(message.__syntheticClientId);
+      }
+      return;
+    }
+    // Non-synthetic resend: recreate then delete the original (web's requestResend).
+    // The original is only removed once the new message is actually created —
+    // deleting it on failure would drop the text the user is trying to send.
+    try {
+      await createMessage({
+        subChannelId: message.subChannelId,
+        dataType: message.dataType,
+        data: message.data,
+        parentId: message.parentId,
+      } as Parameters<typeof createMessage>[0]);
+    } catch {
+      // useCreateMessage's onError already raised the toast. Swallow the
+      // rejection so it isn't an unhandled promise, and leave the original
+      // failed bubble in place.
+      return;
+    }
+    if (message.messageId) {
+      await deleteMessage(message.messageId);
+    }
+  }
+
+  function handleDelete(message: Amity.Message) {
+    if (isSyntheticPendingMessage(message)) {
+      if (message.dataType === 'text') {
+        onDiscardText(message.__syntheticClientId);
+      } else {
+        onDiscardUpload(message.__syntheticClientId);
+      }
+      return;
+    }
+    if (message.messageId) {
+      deleteMessage(message.messageId);
+    }
+  }
+
+  function openFailedSheet(message: Amity.Message) {
+    openBottomSheet({
+      height: bottomSheetHeight[2 as keyof typeof bottomSheetHeight],
+      content: (
+        <View style={styles.sheetContainer}>
+          <Menu variant="chat" container="drawer">
+            {/* Web Menu.Item default typography is BodyBold — no `typography`
+                override (the earlier `body` override was the wrong button style). */}
+            <Menu.Item
+              label={resendLabel}
+              onPress={() => {
+                closeBottomSheet();
+                handleResend(message);
+              }}
+            />
+            <Menu.Item
+              label={deleteLabel}
+              destructive
+              onPress={() => {
+                closeBottomSheet();
+                handleDelete(message);
+              }}
+            />
+          </Menu>
+        </View>
+      ),
+    });
+  }
+
+  return { openFailedSheet };
+}
+
+const styles = StyleSheet.create({
+  // Web's drawer container supplies the horizontal padding (its menuItem in a
+  // drawer is `0.875rem 0`, i.e. no side padding). Match the RN chat-sheet
+  // convention (AmityConversationChatUserActionComponent) so the Resend/Delete
+  // rows aren't flush to the screen edges.
+  sheetContainer: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+  },
+});

package/src/social/features/chat/features/shared/hooks/useMarkAsRead.ts

@@ -0,0 +1,55 @@
+// useMarkAsRead — ported from AmityUiKitWeb v4/chat/features/shared/hooks/useMarkAsRead.
+// Marks the latest visible message as read once the viewer is at the bottom of
+// the list, debounced so rapid scroll/append churn only fires one markRead.
+//
+// RN adaptations from web:
+//   - Web debounced via `react-use`'s `useDebounce` (not a dependency here); we
+//     reproduce it with a `useEffect` + `setTimeout` keyed on the same deps, and
+//     define MARK_READ_DEBOUNCE_MS locally (web imported it from ~/v4/chat/constants).
+//   - SDK method is identical: `Amity.Message#markRead()` (an instance method on
+//     the message object, same as web). The task's SubChannelRepository /
+//     MessageRepository hint resolves to this per-message call.
+//   - Added `isConnected` gate (via useAuth) as mandated — web does not gate on
+//     connection state; this is an intentional RN deviation matching the repo's
+//     live-SDK-call convention (see hooks/collections/useChannelsCollection).
+
+import { useEffect, useRef } from 'react';
+
+import useAuth from '../../../../../../core/hooks/useAuth';
+
+const MARK_READ_DEBOUNCE_MS = 500;
+
+type UseMarkAsReadParams = {
+  latestMessage: Amity.Message | null;
+  atBottom: boolean;
+  enabled: boolean;
+};
+
+export function useMarkAsRead({
+  latestMessage,
+  atBottom,
+  enabled,
+}: UseMarkAsReadParams) {
+  const { isConnected } = useAuth();
+  const lastMarkedIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (!isConnected || !enabled || !atBottom || !latestMessage) return;
+      const id = latestMessage.messageId;
+      if (!id || lastMarkedIdRef.current === id) return;
+      try {
+        latestMessage.markRead();
+        lastMarkedIdRef.current = id;
+      } catch {
+        // markRead failures are non-fatal; SDK will retry on the next visibility tick
+      }
+    }, MARK_READ_DEBOUNCE_MS);
+
+    return () => clearTimeout(timer);
+  }, [latestMessage?.messageId, atBottom, enabled, isConnected]);
+
+  useEffect(() => {
+    lastMarkedIdRef.current = null;
+  }, [latestMessage?.subChannelId]);
+}