@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

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

@@ -1,165 +0,0 @@
-// 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/chat/features/shared/hooks/useChatMessage.ts

@@ -1,303 +0,0 @@
-// 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/chat/features/shared/hooks/useFailedMessageSheet.tsx

@@ -1,143 +0,0 @@
-// 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/chat/features/shared/hooks/useMarkAsRead.ts

@@ -1,55 +0,0 @@
-// 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]);
-}