@ermis-network/ermis-chat-react 1.0.9 → 2.0.1

package/src/hooks/useChannelMessages.ts

@@ -1,15 +1,35 @@
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useRef, useLayoutEffect } from 'react';
 import type { Event } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from './useChatClient';
 import { isPendingMember } from '../channelRoleUtils';
 
 export type UseChannelMessagesOptions = {
   scrollToBottom: (smooth: boolean) => void;
+  /** Reads the live virtual-list metrics to decide whether the viewport is near the bottom. */
+  isNearBottom?: () => boolean;
+  /** Temporarily blocks scroll-triggered pagination while auto-following new messages. */
+  holdScrollLoadLock?: (duration?: number) => void;
   /** Shared guard ref — blocks scroll-triggered loads during channel switch */
   jumpingRef: React.MutableRefObject<boolean>;
   isAtBottomRef: React.MutableRefObject<boolean>;
   /** Called to reset load-more state when channel switches */
   onChannelSwitch?: () => void;
+  /** Whether to include hidden (deleted) messages in the initial channel query */
+  includeHiddenMessages?: boolean;
+  /** Ref to the message list container for smooth opacity transitions */
+  containerRef?: React.RefObject<HTMLDivElement>;
+};
+
+// Track channels that have already been queried with include_hidden_messages globally for the session
+const fullyQueriedChannels = new Set<string>();
+export const markChannelAsFullyQueried = (cid: string) => fullyQueriedChannels.add(cid);
+
+const isInactiveInviteRole = (role?: string) => isPendingMember(role) || role === 'rejected' || role === 'skipped';
+const isE2eeChannel = (channel: any, client: any) => {
+  if (channel?.data?.mls_enabled === true) return true;
+  const parentCid = channel?.data?.parent_cid as string | undefined;
+  if (!parentCid) return false;
+  return client?.activeChannels?.[parentCid]?.data?.mls_enabled === true;
 };
 
 /**
@@ -26,70 +46,337 @@ const SCROLL_DELAYS = [50, 200, 500, 1000];
  */
 export function useChannelMessages({
   scrollToBottom,
+  isNearBottom,
+  holdScrollLoadLock,
   jumpingRef,
   isAtBottomRef,
   onChannelSwitch,
+  includeHiddenMessages = true,
+  containerRef,
 }: UseChannelMessagesOptions): void {
-  const { client, activeChannel, syncMessages, setReadState } = useChatClient();
+  const { client, activeChannel, syncMessages, setMessages, setReadState } = useChatClient();
+  const inviteRefreshInFlightRef = useRef<Set<string>>(new Set());
+
+  const shouldAutoScroll = useCallback(
+    () => isAtBottomRef.current || Boolean(isNearBottom?.()),
+    [isAtBottomRef, isNearBottom],
+  );
+
+  const snapToBottomAfterCommit = useCallback(
+    (force = false) => {
+      if (force) {
+        isAtBottomRef.current = true;
+      }
+      if (force || shouldAutoScroll()) {
+        holdScrollLoadLock?.(750);
+      }
+
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (force || shouldAutoScroll()) {
+            scrollToBottom(false);
+          }
+        });
+      });
+
+      [80, 180, 360].forEach((delay) => {
+        setTimeout(() => {
+          if (force || shouldAutoScroll()) {
+            scrollToBottom(false);
+          }
+        }, delay);
+      });
+    },
+    [scrollToBottom, shouldAutoScroll, isAtBottomRef, holdScrollLoadLock],
+  );
 
   const scheduleScrollToBottom = useCallback(
-    (smooth: boolean) => {
+    (smooth: boolean, force = false) => {
+      if (force) {
+        isAtBottomRef.current = true;
+      }
       if (smooth) {
         // Trigger smooth scroll exactly once, otherwise browsers will
         // cancel the smooth animation if called multiple times in a row
-        setTimeout(() => scrollToBottom(true), 100);
+        setTimeout(() => {
+          if (!force && !shouldAutoScroll()) return;
+          scrollToBottom(true);
+        }, 100);
       } else {
         SCROLL_DELAYS.forEach((delay) => {
-          setTimeout(() => scrollToBottom(false), delay);
+          setTimeout(() => {
+            if (!force && !shouldAutoScroll()) return;
+            scrollToBottom(false);
+          }, delay);
         });
       }
     },
-    [scrollToBottom],
+    [scrollToBottom, isAtBottomRef, shouldAutoScroll],
   );
 
+  // Block scroll-triggered loadMore SYNCHRONOUSLY before browser paint.
+  // VList remounts (key change) and fires onScroll during layout — useEffect
+  // runs too late to block it. useLayoutEffect runs before paint/scroll events.
+  useLayoutEffect(() => {
+    if (!activeChannel) return;
+    jumpingRef.current = true;
+    isAtBottomRef.current = true;
+  }, [activeChannel]);
+
   useEffect(() => {
     if (!activeChannel) return;
 
     // Reset state for the new channel
     onChannelSwitch?.();
 
-    // Manually force isAtBottom to true because we are jumping to the bottom.
-    // jumpingRef blocks the resulting scroll event from updating isAtBottomRef,
-    // so if it was false in the previous channel, it would stay false!
-    isAtBottomRef.current = true;
+    // Instantly hide the list when channel changes
+    const el = containerRef?.current;
+    if (el) {
+      el.style.opacity = '0';
+      el.style.transition = 'none';
+    }
 
-    // Block scroll triggers during channel-switch scroll
-    jumpingRef.current = true;
-    // Defer scroll outside React lifecycle to avoid virtua flushSync warning
-    setTimeout(() => {
-      scrollToBottom(false);
-      // Wait long enough for scrollToBottom's internal retries and the browser
-      // to execute the scroll event
+    const fadeListIn = () => {
+      if (!el) return;
+      // Allow virtua a brief moment to measure items after scroll before showing
+      setTimeout(() => {
+        el.style.transition = 'opacity 0.1s ease-out';
+        el.style.opacity = '1';
+      }, 50);
+    };
+
+    const isDecryptedPlaintextMessage = (message: any) => {
+      if (!message || message.e2ee_status === 'failed' || message.e2ee_status === 'decrypting') return false;
+      return (
+        typeof message.text === 'string' ||
+        Boolean(message.attachments?.length) ||
+        Boolean(message.sticker_url) ||
+        Boolean(message.poll_type) ||
+        Boolean(message.poll_choice_counts) ||
+        Boolean(message.latest_poll_choices)
+      );
+    };
+
+    const normalizeDecryptedMessage = (message: any) => {
+      if (!isDecryptedPlaintextMessage(message)) return message;
+      return {
+        ...message,
+        content_type: 'standard',
+        type: message.sticker_url ? 'sticker' : message.type,
+      };
+    };
+
+    const getMessageAndQuoteIds = (messages: any[]) =>
+      Array.from(
+        new Set(
+          messages.flatMap((message: any) =>
+            [message?.id, message?.quoted_message_id].filter(
+              (id): id is string => typeof id === 'string' && id.length > 0,
+            ),
+          ),
+        ),
+      );
+
+    const loadStoredE2eeMessagesById = async (messageIds: string[]) => {
+      const storage = client.encryptionManager?.storage;
+      if (!storage || messageIds.length === 0) return [];
+
+      const uniqueIds = Array.from(new Set(messageIds));
+      if (storage.loadE2eeMessages) {
+        const stored = await storage.loadE2eeMessages(uniqueIds);
+        return Array.from(stored.values());
+      }
+
+      const stored = await Promise.all(uniqueIds.map((id) => storage.loadE2eeMessage(id).catch(() => null)));
+      return stored.filter(Boolean);
+    };
+
+    const mergeAndFilterE2eeMessages = (
+      baseMessages: any[],
+      decryptedMessages: any[],
+      options: { includeMissing?: boolean } = {},
+    ) => {
+      const includeMissing = options.includeMissing ?? true;
+      const byId = new Map(baseMessages.map((msg: any) => [msg.id, msg]));
+      for (const decrypted of decryptedMessages) {
+        const normalized = normalizeDecryptedMessage(decrypted);
+        const hasPlaintext = isDecryptedPlaintextMessage(normalized);
+        const current: any = byId.get(decrypted.id);
+        if (!includeMissing && !current) continue;
+        byId.set(decrypted.id, {
+          ...(current || {}),
+          ...normalized,
+          content_type: hasPlaintext
+            ? normalized.content_type || current?.content_type || 'standard'
+            : normalized.content_type || current?.content_type,
+          status: normalized.status ?? (hasPlaintext ? 'received' : current?.status ?? null),
+        });
+      }
+
+      return Array.from(byId.values()).sort((a: any, b: any) => {
+        const aTime = new Date(a.created_at || 0).getTime();
+        const bTime = new Date(b.created_at || 0).getTime();
+        return aTime - bTime;
+      });
+    };
+
+    const mergeDecryptedMessages = (decryptedMessages: any[], includeMissing = false) => {
+      if (!decryptedMessages.length) {
+        setMessages((prev) => mergeAndFilterE2eeMessages(prev, []));
+        return;
+      }
+      setMessages((prev) =>
+        mergeAndFilterE2eeMessages(prev, decryptedMessages, { includeMissing: includeMissing || prev.length === 0 }),
+      );
+    };
+
+    const syncMessagesWithE2eeCache = (options: { includeStoredWindow?: boolean } = {}) => {
+      if (!isE2eeChannel(activeChannel, client) || !client.encryptionManager?.storage || !activeChannel.cid) {
+        syncMessages();
+        return;
+      }
+
+      const baseMessages = [...activeChannel.state.latestMessages];
+      setMessages(mergeAndFilterE2eeMessages(baseMessages, []));
+
+      const loadStoredMessages = options.includeStoredWindow
+        ? client.encryptionManager.storage.getE2eeMessages(activeChannel.cid, 100)
+        : loadStoredE2eeMessagesById(getMessageAndQuoteIds(baseMessages));
+
+      loadStoredMessages
+        .then((decryptedMessages: any[]) => {
+          setMessages((prev) =>
+            mergeAndFilterE2eeMessages(prev.length ? prev : baseMessages, decryptedMessages, {
+              includeMissing: options.includeStoredWindow === true,
+            }),
+          );
+        })
+        .catch((err: any) => console.warn('[E2EE] Failed to load decrypted message cache', err));
+    };
+
+    const syncStoredE2eeMessages = (includeStoredWindow = false) => {
+      if (!isE2eeChannel(activeChannel, client) || !client.encryptionManager?.storage || !activeChannel.cid) return;
+      const baseMessages = [...activeChannel.state.latestMessages];
+      const loadStoredMessages = includeStoredWindow
+        ? client.encryptionManager.storage.getE2eeMessages(activeChannel.cid, 100)
+        : loadStoredE2eeMessagesById(getMessageAndQuoteIds(baseMessages));
+
+      loadStoredMessages
+        .then((storedMessages: any[]) => mergeDecryptedMessages(storedMessages, includeStoredWindow))
+        .catch((err: any) => console.warn('[E2EE] Failed to load decrypted message cache', err));
+    };
+
+    const ensureE2eeChannelReady = () => {
+      if (!isE2eeChannel(activeChannel, client) || !client.encryptionManager?.initialized || !activeChannel.cid) return;
+      if (isInactiveInviteRole(activeChannel.state?.membership?.channel_role as string)) return;
+      client.encryptionManager
+        .ensureChannelReady(activeChannel.type, activeChannel.id, activeChannel.cid, { source: 'open' })
+        .then(() => syncMessagesWithE2eeCache({ includeStoredWindow: true }))
+        .catch((err: any) => console.warn('[E2EE] Failed to ensure channel ready', err));
+    };
+
+    // Fetch hidden messages if not already done for this channel
+    const cid = activeChannel.cid;
+    if (includeHiddenMessages && cid && !fullyQueriedChannels.has(cid)) {
+      syncMessagesWithE2eeCache({ includeStoredWindow: true });
+      activeChannel
+        .query({
+          messages: { limit: 25, include_hidden_messages: true },
+        })
+        .then(() => {
+          fullyQueriedChannels.add(cid);
+          syncMessagesWithE2eeCache({ includeStoredWindow: true });
+          ensureE2eeChannelReady();
+          // Sync initial read state from SDK so read receipts show immediately
+          setReadState({ ...activeChannel.state.read });
+          scheduleScrollToBottom(false);
+          fadeListIn(); // Fade in AFTER query finishes and sync is called
+          // Release jumping guard AFTER scrollToBottom has had time to execute.
+          // syncMessages() triggers a VList re-render which fires onScroll at
+          // offset≈0, and scheduleScrollToBottom's first scroll is at +50ms.
+          // If we release jumpingRef synchronously, loadMore fires before the
+          // scroll. Delay to 150ms so the +50ms scroll runs first.
+          setTimeout(() => {
+            jumpingRef.current = false;
+          }, 150);
+        })
+        .catch((err: any) => {
+          console.error('Failed to query channel on select', err);
+          fadeListIn(); // Fade in anyway on error
+          setTimeout(() => {
+            jumpingRef.current = false;
+          }, 100);
+        });
+    } else {
+      // Already queried: sync cache immediately for instant UI, scroll and fade in quickly
+      syncMessagesWithE2eeCache({ includeStoredWindow: true });
+      ensureE2eeChannelReady();
+      // Sync initial read state from SDK so read receipts show immediately
+      setReadState({ ...activeChannel.state.read });
+      setTimeout(() => {
+        scheduleScrollToBottom(false);
+        fadeListIn();
+      }, 0);
+      // Release after a short delay so scrollToBottom's scroll event doesn't
+      // trigger loadMore
       setTimeout(() => {
         jumpingRef.current = false;
       }, 100);
-    }, 0);
+
+      // Background re-query to ensure messages are fresh (e.g. after scrollToMessage
+      // replaced messages with a small window, or after a stale reconnect).
+      // This does NOT block the UI — cached messages are already visible.
+      activeChannel
+        .query({ messages: { limit: 25, include_hidden_messages: includeHiddenMessages } })
+        .then(() => {
+          syncMessagesWithE2eeCache({ includeStoredWindow: true });
+          setReadState({ ...activeChannel.state.read });
+        })
+        .catch((err: any) => {
+          console.warn('Background re-query for channel messages failed', err);
+        });
+    }
 
     const handleNewMessage = (event: Event) => {
       // Capture scroll state BEFORE sync causes re-render
-      const wasAtBottom = isAtBottomRef.current;
-
-      syncMessages();
-
+      const wasAtBottom = shouldAutoScroll();
       const isOwnMessage = event.message?.user?.id === client.userID || event.message?.user_id === client.userID;
+      const shouldFollowBottom = isOwnMessage || wasAtBottom;
+      if (shouldFollowBottom) {
+        isAtBottomRef.current = true;
+        holdScrollLoadLock?.(750);
+      }
 
-      if (isOwnMessage || wasAtBottom) {
-        scheduleScrollToBottom(true);
+      syncMessagesWithE2eeCache();
+
+      if (isOwnMessage) {
+        // Own/realtime-at-bottom messages use INSTANT scroll to avoid
+        // animation overlap jank during rapid typing. Multiple smooth scrolls
+        // in quick succession cause the visible "jump/snap" effect because
+        // each new animation cancels the previous one mid-way.
+        snapToBottomAfterCommit(true);
+      } else if (wasAtBottom) {
+        snapToBottomAfterCommit(true);
       }
     };
 
-    const handleMessageChange = (_event: Event) => {
-      syncMessages();
+    const handleMessageChange = (event: Event) => {
+      syncMessagesWithE2eeCache();
     };
 
     const handleMessageRead = (_event: Event) => {
       // SDK already updated channel.state.read — sync into React state
       setReadState({ ...activeChannel.state.read });
+      // Read receipt avatars appear below the last message, increasing content
+      // height. Auto-scroll so the user doesn't have to manually scroll down
+      // to see the "seen" indicator.
+      if (shouldAutoScroll()) {
+        setTimeout(() => {
+          if (shouldAutoScroll()) {
+            scrollToBottom(false);
+          }
+        }, 100);
+      }
     };
 
     const handleUnblocked = (event: Event) => {
@@ -99,36 +386,81 @@ export function useChannelMessages({
         activeChannel
           .query({ messages: { limit: 30 } })
           .then(() => {
-            syncMessages();
+            syncMessagesWithE2eeCache({ includeStoredWindow: true });
             scheduleScrollToBottom(false);
             const isPending = isPendingMember(activeChannel.state?.membership?.channel_role as string);
             if (!isPending) {
               activeChannel.markRead().catch(() => {});
             }
           })
-          .catch((e) => console.error('Failed to sync messages after unblock', e));
+          .catch((e: any) => console.error('Failed to sync messages after unblock', e));
       }
     };
 
-    const handleInviteAccepted = (event: Event) => {
-      // Make sure the accepted invite corresponds to the actively opened channel
+    const refreshAfterOwnInviteMembership = (event: Event) => {
       const eventCid =
         event.cid ||
         event.channel?.cid ||
         ((event as any).channel_id ? `${(event as any).channel_type}:${(event as any).channel_id}` : undefined);
-      if (eventCid === activeChannel.cid) {
-        activeChannel
-          .query({ messages: { limit: 30 } })
-          .then(() => {
-            syncMessages();
-            scheduleScrollToBottom(false);
-            activeChannel.markRead().catch(() => {});
-          })
-          .catch((e) => console.error('Failed to sync messages after accepting invite', e));
+      if (eventCid !== activeChannel.cid) return;
+
+      const memberUserId = (event as any).member?.user_id;
+      if (memberUserId && memberUserId !== client.userID) return;
+      if (inviteRefreshInFlightRef.current.has(eventCid)) return;
+
+      inviteRefreshInFlightRef.current.add(eventCid);
+      activeChannel
+        .query({ messages: { limit: 30 } })
+        .then(() => {
+          syncMessagesWithE2eeCache({ includeStoredWindow: true });
+          scheduleScrollToBottom(false);
+          activeChannel.markRead().catch(() => {});
+        })
+        .catch((e: any) => console.error('Failed to refresh channel after invite membership update', e))
+        .finally(() => {
+          inviteRefreshInFlightRef.current.delete(eventCid);
+        });
+    };
+
+    const handleRecovery = () => {
+      // recoverState() only fetches channels with message_limit: 1 (for sidebar previews).
+      // Re-query the active channel with a proper limit to load all missed messages.
+      activeChannel
+        .query({ messages: { limit: 25, include_hidden_messages: true } })
+        .then(() => {
+          syncMessagesWithE2eeCache({ includeStoredWindow: true });
+          ensureE2eeChannelReady();
+          setReadState({ ...activeChannel.state.read });
+          scheduleScrollToBottom(false);
+        })
+        .catch((err: any) => {
+          console.error('Failed to recover channel messages after reconnect', err);
+          // Fallback: sync whatever we have from recoverState
+          syncMessagesWithE2eeCache({ includeStoredWindow: true });
+          ensureE2eeChannelReady();
+          scheduleScrollToBottom(false);
+        });
+    };
+
+    const handleE2eeDecrypted = (event: any) => {
+      if (!event?.message?.id || event.cid !== activeChannel.cid) return;
+      const wasAtBottom = shouldAutoScroll();
+      mergeDecryptedMessages([event.message]);
+      if (wasAtBottom) {
+        snapToBottomAfterCommit(true);
       }
     };
 
-    const client = activeChannel.getClient();
+    const handleE2eeRefresh = (event: any) => {
+      if (event?.cid === activeChannel.cid) {
+        if (Array.isArray(event.messages) && event.messages.length > 0) {
+          mergeDecryptedMessages(event.messages);
+        }
+        syncStoredE2eeMessages();
+      }
+    };
+
+    const eventClient = activeChannel.getClient();
     const sub1 = activeChannel.on('message.new', handleNewMessage);
     const sub2 = activeChannel.on('message.updated', handleMessageChange);
     const sub3 = activeChannel.on('message.deleted', handleMessageChange);
@@ -139,7 +471,16 @@ export function useChannelMessages({
     const sub8 = activeChannel.on('reaction.new', handleMessageChange);
     const sub9 = activeChannel.on('reaction.deleted', handleMessageChange);
     const sub10 = activeChannel.on('member.unblocked', handleUnblocked);
-    const sub11 = client.on('notification.invite_accepted', handleInviteAccepted);
+    const sub11 = activeChannel.on('channel.truncate', handleMessageChange);
+    const sub12 = activeChannel.on('channel.truncate_for_me', handleMessageChange);
+
+    const sub13 = eventClient.on('notification.invite_accepted', refreshAfterOwnInviteMembership);
+    const sub14 = eventClient.on('member.joined', refreshAfterOwnInviteMembership);
+    const sub15 = eventClient.on('connection.recovered', handleRecovery);
+    const sub16 = eventClient.on('e2ee.message_decrypted' as any, handleE2eeDecrypted);
+    const sub17 = eventClient.on('e2ee.post_join_sync' as any, handleE2eeRefresh);
+    const sub18 = eventClient.on('e2ee.channel_ready' as any, handleE2eeRefresh);
+    const sub19 = eventClient.on('e2ee.local_messages_loaded' as any, handleE2eeRefresh);
 
     return () => {
       sub1.unsubscribe();
@@ -153,6 +494,14 @@ export function useChannelMessages({
       sub9.unsubscribe();
       sub10.unsubscribe();
       sub11.unsubscribe();
+      sub12.unsubscribe();
+      sub13.unsubscribe();
+      sub14.unsubscribe();
+      sub15.unsubscribe();
+      sub16.unsubscribe();
+      sub17.unsubscribe();
+      sub18.unsubscribe();
+      sub19.unsubscribe();
     };
-  }, [activeChannel, scrollToBottom, scheduleScrollToBottom, syncMessages, onChannelSwitch, setReadState]);
+  }, [activeChannel, client, scrollToBottom, scheduleScrollToBottom, shouldAutoScroll, snapToBottomAfterCommit, syncMessages, setMessages, onChannelSwitch, setReadState, holdScrollLoadLock]);
 }

package/src/hooks/useChannelRowUpdates.ts

@@ -18,10 +18,17 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
   const [updateCount, setUpdateCount] = useState(0);
 
   useEffect(() => {
-    setIsBannedInChannel(Boolean(channel.state?.membership?.banned));
-    setIsBlockedInChannel(
-      isDirectChannel(channel) ? Boolean(channel.state?.membership?.blocked) : false
-    );
+    const parentCid = channel.data?.parent_cid as string | undefined;
+    const parentChannel = parentCid ? channel.getClient().activeChannels[parentCid] : undefined;
+
+    const computeIsBanned = () => {
+      const selfBanned = Boolean(channel.state?.membership?.banned);
+      const parentBanned = Boolean(parentChannel?.state?.membership?.banned);
+      return selfBanned || parentBanned;
+    };
+
+    setIsBannedInChannel(computeIsBanned());
+    setIsBlockedInChannel(isDirectChannel(channel) ? Boolean(channel.state?.membership?.blocked) : false);
 
     const handleBanned = (event: any) => {
       if (event.member?.user_id === currentUserId) {
@@ -30,11 +37,16 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
     };
     const handleUnbanned = (event: any) => {
       if (event.member?.user_id === currentUserId) {
-        setIsBannedInChannel(false);
+        setIsBannedInChannel(computeIsBanned());
       }
     };
 
     const handleUpdate = () => setUpdateCount((c) => c + 1);
+    const handleE2eePreviewUpdate = (event: any) => {
+      if (event?.cid === channel.cid) {
+        handleUpdate();
+      }
+    };
 
     const sub1 = channel.on('member.banned', handleBanned);
     const sub2 = channel.on('member.unbanned', handleUnbanned);
@@ -42,6 +54,7 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
     const sub4 = channel.on('message.read', handleUpdate);
     const sub5 = channel.on('message.updated', handleUpdate);
     const sub6 = channel.on('message.deleted', handleUpdate);
+    const sub6_me = channel.on('message.deleted_for_me', handleUpdate);
     const sub7 = channel.on('channel.updated', handleUpdate);
     const sub8 = channel.on('member.added', handleUpdate);
     const sub9 = channel.on('member.removed', handleUpdate);
@@ -62,6 +75,18 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
     const sub12 = channel.on('channel.topic.created', handleUpdate);
     const sub13 = channel.on('channel.pinned', handleUpdate);
     const sub14 = channel.on('channel.unpinned', handleUpdate);
+    const client = channel.getClient();
+    const sub15 = client.on('e2ee.message_decrypted' as any, handleE2eePreviewUpdate);
+    const sub16 = client.on('e2ee.local_messages_loaded' as any, handleE2eePreviewUpdate);
+    const sub17 = client.on('e2ee.post_join_sync' as any, handleE2eePreviewUpdate);
+
+    // Topic support: listen for ban events on parent channel too
+    let sub18: { unsubscribe: () => void } | undefined;
+    let sub19: { unsubscribe: () => void } | undefined;
+    if (parentChannel) {
+      sub18 = parentChannel.on('member.banned', handleBanned);
+      sub19 = parentChannel.on('member.unbanned', handleUnbanned);
+    }
 
     return () => {
       sub1.unsubscribe();
@@ -70,6 +95,7 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
       sub4.unsubscribe();
       sub5.unsubscribe();
       sub6.unsubscribe();
+      sub6_me.unsubscribe();
       sub7.unsubscribe();
       sub8.unsubscribe();
       sub9.unsubscribe();
@@ -78,6 +104,11 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
       sub12.unsubscribe();
       sub13.unsubscribe();
       sub14.unsubscribe();
+      sub15.unsubscribe();
+      sub16.unsubscribe();
+      sub17.unsubscribe();
+      if (sub18) sub18.unsubscribe();
+      if (sub19) sub19.unsubscribe();
     };
   }, [channel, currentUserId]);
 

package/src/hooks/useChatUser.ts

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import { useChatClient } from './useChatClient';
+import type { UserResponse, ExtendableGenerics, DefaultGenerics } from '@ermis-network/ermis-chat-sdk';
+
+export const useChatUser = <ErmisChatGenerics extends ExtendableGenerics = DefaultGenerics>() => {
+  const { client } = useChatClient();
+  const [user, setUser] = useState<UserResponse<ErmisChatGenerics> | undefined>(client?.user);
+
+  useEffect(() => {
+    if (!client) return;
+
+    // Set initial user in case it changed before the effect runs
+    setUser(client.user);
+
+    const handleUserUpdated = (event: any) => {
+      if (event.me) {
+        setUser((prev) => {
+          const update = { ...event.me };
+          // Do not let periodic health checks wipe out the user's name/avatar with empty strings
+          if (event.type === 'health.check') {
+            if (!update.name) delete update.name;
+            if (!update.avatar) delete update.avatar;
+          }
+          return { ...prev, ...update };
+        });
+      }
+    };
+
+    const listener = client.on('user.updated', handleUserUpdated);
+    const healthListener = client.on('health.check', handleUserUpdated);
+
+    return () => {
+      listener.unsubscribe();
+      healthListener.unsubscribe();
+    };
+  }, [client]);
+
+  return { user };
+};