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

package/src/hooks/useChannelListUpdates.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import type { Channel, Event } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from './useChatClient';
-import { isDirectChannel } from '../channelTypeUtils';
+import { isDirectChannel, isGroupChannel } from '../channelTypeUtils';
 import { isPendingMember } from '../channelRoleUtils';
 
 /**
@@ -227,6 +227,27 @@ export function useChannelListUpdates(
           return [...prev];
         });
 
+        // For team channels with topics: re-watch to load topics from server.
+        // When the user was pending, queryChannels did not return topics.
+        // After accepting the invite, we need a fresh query to hydrate them.
+        if (eventCid) {
+          const existingChannel = client.activeChannels[eventCid];
+          if (existingChannel && isGroupChannel(existingChannel) && existingChannel.data?.topics_enabled) {
+            existingChannel.watch().then(() => {
+              // Notify React hooks (useTopicGroupUpdates) that topics have been loaded
+              existingChannel._callChannelListeners({
+                type: 'channel.updated',
+                cid: existingChannel.cid,
+                channel: existingChannel.data,
+              } as any);
+              // Also trigger channel list re-render
+              setChannels((p) => [...p]);
+            }).catch((err) => {
+              console.error('Failed to re-watch team channel after invite accepted:', err);
+            });
+          }
+        }
+
         // If the channel is NOT in the list yet (e.g. user just joined a public channel
         // from search), add it — same logic as handleChannelCreated
         if (eventCid) {

package/src/hooks/useChannelMessages.ts

@@ -1,10 +1,14 @@
-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>;
@@ -20,6 +24,14 @@ export type UseChannelMessagesOptions = {
 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;
+};
+
 /**
  * Schedule multiple scroll-to-bottom attempts with increasing delays.
  * Handles content that changes height after initial render (images, embeds).
@@ -34,43 +46,89 @@ 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;
-
-    // Block scroll triggers during channel-switch scroll
-    jumpingRef.current = true;
-
     // Instantly hide the list when channel changes
     const el = containerRef?.current;
     if (el) {
@@ -87,62 +145,238 @@ export function useChannelMessages({
       }, 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);
-          syncMessages();
+          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 or disabled: sync cache, scroll and fade in quickly
-      syncMessages();
+      // 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);
 
-    // Wait long enough for scrollToBottom's internal retries and the browser
-    // to execute the scroll event
-    setTimeout(() => {
-      jumpingRef.current = false;
-    }, 100);
+      // 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);
+      }
+
+      syncMessagesWithE2eeCache();
 
-      if (isOwnMessage || wasAtBottom) {
-        scheduleScrollToBottom(true);
+      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) => {
@@ -152,7 +386,7 @@ 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) {
@@ -163,30 +397,70 @@ export function useChannelMessages({
       }
     };
 
-    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: any) => 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 = () => {
-      syncMessages();
-      scheduleScrollToBottom(false);
+      // 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 client = activeChannel.getClient();
+    const handleE2eeDecrypted = (event: any) => {
+      if (!event?.message?.id || event.cid !== activeChannel.cid) return;
+      const wasAtBottom = shouldAutoScroll();
+      mergeDecryptedMessages([event.message]);
+      if (wasAtBottom) {
+        snapToBottomAfterCommit(true);
+      }
+    };
+
+    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);
@@ -197,9 +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 sub12 = client.on('connection.recovered', handleRecovery);
-    const sub13 = client.on('channels.queried', handleRecovery);
+    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();
@@ -215,6 +496,12 @@ export function useChannelMessages({
       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

@@ -42,6 +42,11 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
     };
 
     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);
@@ -70,13 +75,17 @@ 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 sub15: { unsubscribe: () => void } | undefined;
-    let sub16: { unsubscribe: () => void } | undefined;
+    let sub18: { unsubscribe: () => void } | undefined;
+    let sub19: { unsubscribe: () => void } | undefined;
     if (parentChannel) {
-      sub15 = parentChannel.on('member.banned', handleBanned);
-      sub16 = parentChannel.on('member.unbanned', handleUnbanned);
+      sub18 = parentChannel.on('member.banned', handleBanned);
+      sub19 = parentChannel.on('member.unbanned', handleUnbanned);
     }
 
     return () => {
@@ -95,8 +104,11 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
       sub12.unsubscribe();
       sub13.unsubscribe();
       sub14.unsubscribe();
-      if (sub15) sub15.unsubscribe();
-      if (sub16) sub16.unsubscribe();
+      sub15.unsubscribe();
+      sub16.unsubscribe();
+      sub17.unsubscribe();
+      if (sub18) sub18.unsubscribe();
+      if (sub19) sub19.unsubscribe();
     };
   }, [channel, currentUserId]);
 

package/src/hooks/useChatUser.ts

@@ -14,7 +14,15 @@ export const useChatUser = <ErmisChatGenerics extends ExtendableGenerics = Defau
 
     const handleUserUpdated = (event: any) => {
       if (event.me) {
-        setUser((prev) => ({ ...prev, ...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 };
+        });
       }
     };