@ermis-network/ermis-chat-react 1.0.6 → 1.0.8

package/src/components/UserPicker.tsx

@@ -256,7 +256,7 @@ export const UserPicker: React.FC<UserPickerProps> = ({
       cancelled = true;
       clearTimeout(timer);
     };
-  }, [search, localFilteredUsers.length, client, excludeSet]);
+  }, [search, localFilteredUsers.length, client]);
 
   /* ---------- 5. Derived display list ---------- */
   const usersToDisplay = (search.trim() && localFilteredUsers.length === 0)

package/src/components/VirtualMessageList.tsx

@@ -12,6 +12,8 @@ import { useChannelProfile } from '../hooks/useChannelData';
 import { Avatar } from './Avatar';
 import { MessageItem } from './MessageItem';
 import { SystemMessageItem } from './MessageItem';
+import { isPublicGroupChannel, isDirectChannel } from '../channelTypeUtils';
+import { canManageChannel, isSkippedMember, isPendingMember } from '../channelRoleUtils';
 import {
   defaultMessageRenderers,
   type MessageBubbleProps,
@@ -21,6 +23,10 @@ import { QuotedMessagePreview } from './QuotedMessagePreview';
 import { PinnedMessages } from './PinnedMessages';
 import { ReadReceipts } from './ReadReceipts';
 import { TypingIndicator } from './TypingIndicator';
+import { PendingOverlay } from './PendingOverlay';
+import { SkippedOverlay } from './SkippedOverlay';
+import { BannedOverlay } from './BannedOverlay';
+import { ClosedTopicOverlay } from './ClosedTopicOverlay';
 import type { MessageListProps } from '../types';
 
 /* ----------------------------------------------------------
@@ -75,6 +81,23 @@ const DefaultBubble: React.FC<MessageBubbleProps> = React.memo(({
 ));
 (DefaultBubble as any).displayName = 'DefaultBubble';
 
+const DefaultPendingInviteeNotification = React.memo(({ inviteeName, label }: { inviteeName?: string, label?: string }) => {
+  const defaultLabel = inviteeName ? `${inviteeName} needs to accept your invitation to see the messages you've sent` : 'The invited user needs to accept your invitation to see the messages you\'ve sent';
+  return (
+    <div className="ermis-message-list__pending-invitee">
+      <div className="ermis-message-list__pending-invitee-content">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="8" x2="12" y2="12" />
+          <line x1="12" y1="16" x2="12.01" y2="16" />
+        </svg>
+        <span>{label || defaultLabel}</span>
+      </div>
+    </div>
+  );
+});
+DefaultPendingInviteeNotification.displayName = 'DefaultPendingInviteeNotification';
+
 /* ----------------------------------------------------------
    VirtualMessageList
    ---------------------------------------------------------- */
@@ -104,7 +127,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   emptyTitle = 'No messages yet',
   emptySubtitle = 'Send a message to start the conversation',
   jumpToLatestLabel = '↓ Jump to latest',
-  bannedOverlayTitle = 'You have been blocked from this channel',
+  bannedOverlayTitle = 'You have been banned from this channel',
   bannedOverlaySubtitle = 'You can no longer read or send messages here',
   blockedOverlayTitle = 'You have blocked this user',
   blockedOverlaySubtitle = 'Unblock to continue the conversation',
@@ -112,11 +135,29 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   pendingOverlaySubtitle = 'Accept the invitation to view messages and interact',
   pendingAcceptLabel = 'Accept',
   pendingRejectLabel = 'Reject',
+  pendingSkipLabel = 'Skip',
+  skippedOverlayTitle = 'You skipped this conversation',
+  skippedOverlaySubtitle = 'Accept the invitation to start chatting',
+  skippedAcceptLabel = 'Accept',
+  closedTopicOverlayTitle = 'This topic has been closed',
+  closedTopicOverlaySubtitle = 'You can no longer read or send messages in this topic.',
+  closedTopicReopenLabel = 'Reopen Topic',
+  PendingInviteeNotificationComponent = DefaultPendingInviteeNotification,
+  pendingInviteeLabel,
 }) => {
-  const { client, messages, readState, activeChannel, jumpToMessageId, setJumpToMessageId } = useChatClient();
+  const { client, messages, readState, activeChannel, setActiveChannel, jumpToMessageId, setJumpToMessageId } = useChatClient();
   const { isBanned } = useBannedState(activeChannel, client.userID);
   const { isBlocked } = useBlockedState(activeChannel, client.userID);
   const { isPending } = usePendingState(activeChannel, client.userID);
+  
+  const isSkipped = client.userID 
+    ? isSkippedMember(activeChannel?.state?.members?.[client.userID]?.channel_role as string) || 
+      isSkippedMember(activeChannel?.state?.membership?.channel_role as string)
+    : false;
+
+  const isClosedTopic = activeChannel?.data?.is_closed_topic === true;
+  const parentCid = activeChannel?.data?.parent_cid as string | undefined;
+  const parentChannel = parentCid && client ? client.activeChannels[parentCid] : undefined;
 
   const { channelName, channelImage } = useChannelProfile(activeChannel);
 
@@ -124,6 +165,21 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   const messagesRef = useRef(messages);
   messagesRef.current = messages;
   const currentUserId = client.userID;
+  const currentUserRole = currentUserId ? activeChannel?.state?.members?.[currentUserId]?.channel_role : undefined;
+  const canManageTopic = canManageChannel(currentUserRole);
+
+  const pendingInviteeName = useMemo(() => {
+    if (!activeChannel || !currentUserId) return null;
+    if (!isDirectChannel(activeChannel)) return null;
+    const membersList = Object.values(activeChannel.state?.members || {});
+    if (membersList.length === 2 && !isPending) {
+      const otherUser = membersList.find(m => m.user_id !== currentUserId);
+      if (otherUser && isPendingMember(otherUser.channel_role)) {
+        return otherUser.user?.name || otherUser.user?.id || 'User';
+      }
+    }
+    return null;
+  }, [activeChannel, currentUserId, isPending]);
 
   // Ref to scope DOM queries (safe for multiple instances)
   const containerRef = useRef<HTMLDivElement>(null);
@@ -134,18 +190,33 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   const handleAcceptInvite = useCallback(async () => {
     if (!activeChannel) return;
     try {
-      const isPublicTeam = activeChannel.type === 'team' && Boolean(activeChannel.data?.public);
-      const action = isPublicTeam ? 'join' : 'accept';
+      const isPublicTeamOrMeeting = isPublicGroupChannel(activeChannel);
+      const action = isPublicTeamOrMeeting ? 'join' : 'accept';
       await activeChannel.acceptInvite(action);
     } catch (e: any) {
       console.error('Error accepting invite', e);
     }
   }, [activeChannel]);
 
-  const handleRejectInvite = useCallback(() => {
+  const handleRejectInvite = useCallback(async () => {
     if (!activeChannel) return;
-    activeChannel.rejectInvite().catch((e: any) => console.error('Error rejecting invite', e));
-  }, [activeChannel]);
+    try {
+      await activeChannel.rejectInvite();
+      if (setActiveChannel) setActiveChannel(null);
+    } catch (e: any) {
+      console.error('Error rejecting invite', e);
+    }
+  }, [activeChannel, setActiveChannel]);
+
+  const handleSkipInvite = useCallback(async () => {
+    if (!activeChannel) return;
+    try {
+      await activeChannel.skipInvite();
+      if (setActiveChannel) setActiveChannel(null);
+    } catch (e: any) {
+      console.error('Error skipping invite', e);
+    }
+  }, [activeChannel, setActiveChannel]);
 
   const scrollToBottom = useCallback((smooth = false, attempts = 0) => {
     const handle = vlistRef.current;
@@ -212,6 +283,20 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     }, [setHasMore, setHasNewer]),
   });
 
+  const hasOverlay = Boolean(isClosedTopic || isPending || isBanned || isBlocked || isSkipped);
+  const prevOverlayRef = useRef(hasOverlay);
+
+  useEffect(() => {
+    if (prevOverlayRef.current && !hasOverlay) {
+      // Transitioned from having an overlay to normal view.
+      // Give VList a moment to measure its new DOM size via ResizeObserver, then jump to the bottom.
+      setTimeout(() => scrollToBottom(false), 50);
+      setTimeout(() => scrollToBottom(false), 200);
+      setTimeout(() => scrollToBottom(false), 500);
+    }
+    prevOverlayRef.current = hasOverlay;
+  }, [hasOverlay, scrollToBottom]);
+
   const renderers = useMemo(
     () => ({ ...defaultMessageRenderers, ...customRenderers }),
     [customRenderers],
@@ -354,19 +439,81 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     readReceiptsMaxAvatars,
   ]);
 
-  const blockedClass = isBlocked ? ' ermis-message-list--blocked' : '';
+  if (isBanned || isBlocked) {
+    return (
+      <BannedOverlay
+        isBlocked={isBlocked}
+        blockedTitle={blockedOverlayTitle}
+        bannedTitle={bannedOverlayTitle}
+        blockedSubtitle={blockedOverlaySubtitle}
+        bannedSubtitle={bannedOverlaySubtitle}
+        onUnblock={() => { activeChannel?.unblockUser().catch((e: any) => console.error('Error unblocking user', e)); }}
+      />
+    );
+  }
+
+  if (isPending) {
+    const isDirect = activeChannel ? isDirectChannel(activeChannel) : false;
+    return (
+      <PendingOverlay
+        channelImage={channelImage}
+        channelName={channelName}
+        title={pendingOverlayTitle}
+        subtitle={pendingOverlaySubtitle}
+        rejectLabel={pendingRejectLabel}
+        acceptLabel={pendingAcceptLabel}
+        onReject={handleRejectInvite}
+        onAccept={handleAcceptInvite}
+        skipLabel={isDirect ? pendingSkipLabel : undefined}
+        onSkip={isDirect ? handleSkipInvite : undefined}
+        AvatarComponent={AvatarComponent}
+      />
+    );
+  }
+
+  if (isSkipped) {
+    return (
+      <SkippedOverlay
+        channelImage={channelImage}
+        channelName={channelName}
+        title={skippedOverlayTitle}
+        subtitle={skippedOverlaySubtitle}
+        acceptLabel={skippedAcceptLabel}
+        onAccept={handleAcceptInvite}
+        AvatarComponent={AvatarComponent}
+      />
+    );
+  }
+
+  if (isClosedTopic) {
+    return (
+      <ClosedTopicOverlay
+        title={closedTopicOverlayTitle}
+        subtitle={closedTopicOverlaySubtitle}
+        canManageTopic={Boolean(canManageTopic && activeChannel && parentChannel)}
+        reopenLabel={closedTopicReopenLabel}
+        onReopen={() => { parentChannel?.reopenTopic(activeChannel!.cid).catch((e: any) => console.error('Error reopening topic', e)); }}
+      />
+    );
+  }
 
   return (
-    <div ref={containerRef} className={`ermis-message-list${isBanned ? ' ermis-message-list--banned' : ''}${blockedClass}${className ? ` ${className}` : ''}`}>
-      {!isBanned && !isBlocked && showPinnedMessages && <PinnedMessagesComponent onClickMessage={scrollToMessage} AvatarComponent={AvatarComponent} />}
+    <div ref={containerRef} className={`ermis-message-list${className ? ` ${className}` : ''}`}>
+      {showPinnedMessages && <PinnedMessagesComponent onClickMessage={scrollToMessage} AvatarComponent={AvatarComponent} />}
 
-      {messages.length === 0 && !isBanned && !isPending && (
+      {messages.length === 0 && (
         EmptyStateIndicator === DefaultEmpty
           ? <DefaultEmpty title={emptyTitle} subtitle={emptySubtitle} />
           : <EmptyStateIndicator />
       )}
 
-      {/* VList always rendered so virtua keeps its viewport measurement */}
+      {pendingInviteeName && (
+        <PendingInviteeNotificationComponent 
+          inviteeName={pendingInviteeName} 
+          label={typeof pendingInviteeLabel === 'function' ? pendingInviteeLabel(pendingInviteeName) : pendingInviteeLabel} 
+        />
+      )}
+
       <VList
         key={activeChannel?.cid || 'empty'}
         ref={vlistRef}
@@ -374,46 +521,14 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
         onScroll={handleScroll}
         className="ermis-message-list__vlist"
       >
-        {isPending && !isBanned && !isBlocked ? (
-          <div className="ermis-message-list__pending-overlay">
-            <div className="ermis-message-list__pending-card">
-              <Avatar image={channelImage} name={channelName} size={64} className="ermis-message-list__pending-avatar" />
-              <span className="ermis-message-list__pending-overlay-title">{pendingOverlayTitle}</span>
-              <div className="ermis-message-list__pending-channel-name">{channelName}</div>
-              <span className="ermis-message-list__pending-overlay-subtitle">{pendingOverlaySubtitle}</span>
-              <div className="ermis-message-list__pending-actions">
-                <button className="ermis-message-list__reject-btn" onClick={handleRejectInvite}>{pendingRejectLabel}</button>
-                <button className="ermis-message-list__accept-btn" onClick={handleAcceptInvite}>{pendingAcceptLabel}</button>
-              </div>
-            </div>
-          </div>
-        ) : (isBanned || isBlocked) && !isPending ? (
-          <div className="ermis-message-list__banned-overlay">
-            <div className="ermis-message-list__banned-overlay-icon">
-              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-                <circle cx="12" cy="12" r="10" />
-                <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
-              </svg>
-            </div>
-            <span className="ermis-message-list__banned-overlay-title">{isBlocked ? blockedOverlayTitle : bannedOverlayTitle}</span>
-            <span className="ermis-message-list__banned-overlay-subtitle">{isBlocked ? blockedOverlaySubtitle : bannedOverlaySubtitle}</span>
-            {isBlocked && activeChannel && (
-              <button
-                className="ermis-message-list__unblock-btn"
-                onClick={() => { activeChannel.unblockUser().catch((e: any) => console.error('Error unblocking user', e)); }}
-              >
-                Unblock
-              </button>
-            )}
-          </div>
-        ) : messageElements}
+        {messageElements}
       </VList>
 
       {/* Typing indicator */}
-      {!isBanned && !isBlocked && !isPending && showTypingIndicator && <TypingIndicatorComponent />}
+      {showTypingIndicator && <TypingIndicatorComponent />}
 
       {/* Jump to latest button */}
-      {!isBanned && !isBlocked && !isPending && hasNewer && (
+      {hasNewer && (
         JumpToLatestButton === DefaultJumpToLatest
           ? <DefaultJumpToLatest onClick={jumpToLatest} label={jumpToLatestLabel} />
           : <JumpToLatestButton onClick={jumpToLatest} />

package/src/hooks/useBannedState.ts

@@ -6,12 +6,16 @@ import type { Channel } from '@ermis-network/ermis-chat-sdk';
  *
  * Reads the initial value from `channel.state.membership.banned` and subscribes
  * to `member.banned` / `member.unbanned` WebSocket events for real-time updates.
+ * If the channel is a topic, it also synchronizes with the parent channel's ban state.
  *
  * Only triggers a re-render when the *current user* is the target of the event.
  */
 export function useBannedState(channel: Channel | null | undefined, currentUserId?: string) {
   const [isBanned, setIsBanned] = useState<boolean>(() => {
-    return Boolean(channel?.state?.membership?.banned);
+    if (!channel) return false;
+    const parentCid = channel.data?.parent_cid as string | undefined;
+    const parentChannel = parentCid ? channel.getClient().activeChannels[parentCid] : undefined;
+    return Boolean(channel.state?.membership?.banned || parentChannel?.state?.membership?.banned);
   });
 
   useEffect(() => {
@@ -20,8 +24,11 @@ export function useBannedState(channel: Channel | null | undefined, currentUserI
       return;
     }
 
+    const parentCid = channel.data?.parent_cid as string | undefined;
+    const parentChannel = parentCid ? channel.getClient().activeChannels[parentCid] : undefined;
+
     // Sync initial state when channel changes
-    setIsBanned(Boolean(channel.state?.membership?.banned));
+    setIsBanned(Boolean(channel.state?.membership?.banned || parentChannel?.state?.membership?.banned));
 
     const handleBanned = (event: any) => {
       if (event.member?.user_id === currentUserId) {
@@ -31,16 +38,33 @@ export function useBannedState(channel: Channel | null | undefined, currentUserI
 
     const handleUnbanned = (event: any) => {
       if (event.member?.user_id === currentUserId) {
-        setIsBanned(false);
+        const eventCid = event.cid || (event.channel_type ? `${event.channel_type}:${event.channel_id}` : undefined);
+        let cBanned = Boolean(channel.state?.membership?.banned);
+        let pBanned = Boolean(parentChannel?.state?.membership?.banned);
+        
+        if (eventCid === channel.cid) cBanned = false;
+        if (parentChannel && eventCid === parentChannel.cid) pBanned = false;
+        
+        setIsBanned(cBanned || pBanned);
       }
     };
 
     const sub1 = channel.on('member.banned', handleBanned);
     const sub2 = channel.on('member.unbanned', handleUnbanned);
 
+    let sub3: { unsubscribe: () => void } | undefined;
+    let sub4: { unsubscribe: () => void } | undefined;
+
+    if (parentChannel) {
+      sub3 = parentChannel.on('member.banned', handleBanned);
+      sub4 = parentChannel.on('member.unbanned', handleUnbanned);
+    }
+
     return () => {
       sub1.unsubscribe();
       sub2.unsubscribe();
+      if (sub3) sub3.unsubscribe();
+      if (sub4) sub4.unsubscribe();
     };
   }, [channel, currentUserId]);
 

package/src/hooks/useBlockedState.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { isDirectChannel } from '../channelTypeUtils';
 
 /**
  * Hook that tracks whether the current user has blocked the other party
@@ -17,12 +18,12 @@ import type { Channel } from '@ermis-network/ermis-chat-sdk';
  */
 export function useBlockedState(channel: Channel | null | undefined, currentUserId?: string) {
   const [isBlocked, setIsBlocked] = useState<boolean>(() => {
-    if (channel?.type !== 'messaging') return false;
+    if (!isDirectChannel(channel)) return false;
     return Boolean(channel?.state?.membership?.blocked);
   });
 
   useEffect(() => {
-    if (!channel || channel.type !== 'messaging') {
+    if (!channel || !isDirectChannel(channel)) {
       setIsBlocked(false);
       return;
     }

package/src/hooks/useChannelCapabilities.ts

@@ -1,5 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useChatClient } from './useChatClient';
+import { isGroupChannel } from '../channelTypeUtils';
+import { canManageChannel, CHANNEL_ROLES } from '../channelRoleUtils';
 
 export const useChannelCapabilities = () => {
   const { activeChannel, client } = useChatClient();
@@ -17,21 +19,21 @@ export const useChannelCapabilities = () => {
   }, [activeChannel]);
 
   const currentUserId = client?.userID || '';
-  const isTeamChannel = activeChannel?.type === 'team';
+  const isGroupCh = isGroupChannel(activeChannel);
   const role = (activeChannel?.state as any)?.members?.[currentUserId]?.channel_role;
   
-  const isOwner = role === 'owner' || activeChannel?.data?.created_by_id === currentUserId;
-  const isModerator = role === 'moder';
-  const isOwnerOrModerator = isOwner || isModerator;
+  const isOwner = role === CHANNEL_ROLES.OWNER || activeChannel?.data?.created_by_id === currentUserId;
+  const isModerator = role === CHANNEL_ROLES.MODERATOR;
+  const isOwnerOrModerator = isOwner || isModerator || canManageChannel(role);
 
-  const capabilities: string[] = isTeamChannel ? (activeChannel?.data as any)?.member_capabilities || [] : [];
+  const capabilities: string[] = isGroupCh ? (activeChannel?.data as any)?.member_capabilities || [] : [];
 
   const hasCapability = useCallback((cap: string) => {
-    return !isTeamChannel || isOwnerOrModerator || capabilities.includes(cap);
-  }, [isTeamChannel, isOwnerOrModerator, capabilities, updateTick]); // React to updateTick correctly
+    return !isGroupCh || isOwnerOrModerator || capabilities.includes(cap);
+  }, [isGroupCh, isOwnerOrModerator, capabilities, updateTick]); // React to updateTick correctly
 
   return {
-    isTeamChannel,
+    isGroupChannel: isGroupCh,
     isOwner,
     isModerator,
     isOwnerOrModerator,

package/src/hooks/useChannelData.ts

@@ -47,7 +47,7 @@ export const useChannelProfile = (channel: Channel | null | undefined) => {
     return () => sub.unsubscribe();
   }, [channel]);
 
-  const channelName = useMemo(() => channel?.data?.name || channel?.cid || 'Unknown Channel', [channel?.data?.name, channel?.cid, channelUpdateCount]);
+  const channelName = useMemo(() => channel?.data?.name || channel?.cid || 'Unknown Channel', [channel?.data?.name, channel?.cid, channel?.type, channelUpdateCount]);
   const channelImage = useMemo(() => channel?.data?.image as string | undefined, [channel?.data?.image, channelUpdateCount]);
   const channelDescription = useMemo(() => channel?.data?.description as string | undefined, [channel?.data?.description, channelUpdateCount]);
 

package/src/hooks/useChannelListUpdates.ts

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from 'react';
 import type { Channel, Event } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from './useChatClient';
+import { isDirectChannel } from '../channelTypeUtils';
+import { isPendingMember } from '../channelRoleUtils';
 
 /**
  * Subscribes to real-time events and keeps the channel list in sync:
@@ -35,9 +37,8 @@ export function useChannelListUpdates(
       const active = activeChannelRef.current;
       if (active?.cid === eventCid && event.user?.id !== client.userID) {
         const isBannedInActive = Boolean(active.state?.membership?.banned);
-        const isBlockedInActive = active.type === 'messaging' && Boolean(active.state?.membership?.blocked);
-        const isPendingActive =
-          active.state?.membership?.channel_role === 'pending' || (active.state?.membership as Record<string, unknown>)?.role === 'pending';
+        const isBlockedInActive = isDirectChannel(active) && Boolean(active.state?.membership?.blocked);
+        const isPendingActive = isPendingMember(active.state?.membership?.channel_role as string);
 
         if (!isBannedInActive && !isBlockedInActive && !isPendingActive) {
           active.markRead().catch(() => {
@@ -121,7 +122,10 @@ export function useChannelListUpdates(
         // we optimistically inject the membership so it instantly jumps into pending invites!
         // We DO NOT do this for channel.created, because in channel.created, event.member is the creator (owner).
         if (!forceWatch && event.type === 'member.added' && event.member && channelInstance.state) {
-          channelInstance.state.membership = { ...channelInstance.state.membership, ...event.member } as unknown as Record<string, unknown>;
+          channelInstance.state.membership = {
+            ...channelInstance.state.membership,
+            ...event.member,
+          } as unknown as Record<string, unknown>;
         }
 
         // If the caller requested an explicit api call (e.g. for channel.created)
@@ -183,7 +187,9 @@ export function useChannelListUpdates(
           const eventCid =
             event.cid ||
             event.channel?.cid ||
-            ((event as Record<string, unknown>).channel_id ? `${(event as Record<string, unknown>).channel_type}:${(event as Record<string, unknown>).channel_id}` : undefined);
+            ((event as Record<string, unknown>).channel_id
+              ? `${(event as Record<string, unknown>).channel_type}:${(event as Record<string, unknown>).channel_id}`
+              : undefined);
 
           if (eventCid && event.member) {
             const targetChannel = prev.find((c) => c.cid === eventCid);
@@ -201,6 +207,11 @@ export function useChannelListUpdates(
       }
     };
 
+    // --- channel.topic.enabled / disabled / created / channel.pinned / channel.unpinned: force re-render so ChannelList toggles Accordion UI, inserts new topic, or updates pinned channels ---
+    const handleGenericUpdate = (event: Event) => {
+      setChannels((prev) => [...prev]);
+    };
+
     const sub1 = client.on('message.new', handleNewMessage);
     const sub2 = client.on('channel.deleted', handleChannelDeleted);
     const sub3 = client.on('member.removed', handleMemberRemoved);
@@ -209,6 +220,12 @@ export function useChannelListUpdates(
     const sub6 = client.on('notification.added_to_channel', handleMemberAdded);
     const sub7 = client.on('notification.invite_rejected', handleMemberRemoved);
     const sub8 = client.on('notification.invite_accepted', handleMemberUpdated);
+    const sub9 = client.on('channel.topic.enabled', handleGenericUpdate);
+    const sub10 = client.on('channel.topic.disabled', handleGenericUpdate);
+    const sub11 = client.on('channel.topic.created', handleGenericUpdate);
+    const sub12 = client.on('channel.pinned', handleGenericUpdate);
+    const sub13 = client.on('channel.unpinned', handleGenericUpdate);
+    const sub14 = client.on('notification.invite_messaging_skipped', handleMemberUpdated);
 
     return () => {
       sub1.unsubscribe();
@@ -219,6 +236,12 @@ export function useChannelListUpdates(
       sub6.unsubscribe();
       sub7.unsubscribe();
       sub8.unsubscribe();
+      sub9.unsubscribe();
+      sub10.unsubscribe();
+      sub11.unsubscribe();
+      sub12.unsubscribe();
+      sub13.unsubscribe();
+      sub14.unsubscribe();
     };
   }, [client, setChannels, setActiveChannel]);
 }

package/src/hooks/useChannelMessages.ts

@@ -1,6 +1,7 @@
 import { useEffect, useCallback } 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;
@@ -100,9 +101,7 @@ export function useChannelMessages({
           .then(() => {
             syncMessages();
             scheduleScrollToBottom(false);
-            const isPending =
-              activeChannel.state?.membership?.channel_role === 'pending' ||
-              (activeChannel.state?.membership as any)?.role === 'pending';
+            const isPending = isPendingMember(activeChannel.state?.membership?.channel_role as string);
             if (!isPending) {
               activeChannel.markRead().catch(() => {});
             }

package/src/hooks/useChannelRowUpdates.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { isDirectChannel } from '../channelTypeUtils';
 
 /**
  * Custom hook to abstract real-time row-level updates for a single channel.
@@ -9,7 +10,7 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
   // Track banned state for the current user in this channel
   const [isBannedInChannel, setIsBannedInChannel] = useState(() => Boolean(channel.state?.membership?.banned));
   const [isBlockedInChannel, setIsBlockedInChannel] = useState(() => {
-    if (channel.type !== 'messaging') return false;
+    if (!isDirectChannel(channel)) return false;
     return Boolean(channel.state?.membership?.blocked);
   });
 
@@ -19,7 +20,7 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
   useEffect(() => {
     setIsBannedInChannel(Boolean(channel.state?.membership?.banned));
     setIsBlockedInChannel(
-      channel.type === 'messaging' ? Boolean(channel.state?.membership?.blocked) : false
+      isDirectChannel(channel) ? Boolean(channel.state?.membership?.blocked) : false
     );
 
     const handleBanned = (event: any) => {
@@ -58,6 +59,9 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
     };
     const sub10 = channel.on('member.blocked', handleBlocked);
     const sub11 = channel.on('member.unblocked', handleUnblocked);
+    const sub12 = channel.on('channel.topic.created', handleUpdate);
+    const sub13 = channel.on('channel.pinned', handleUpdate);
+    const sub14 = channel.on('channel.unpinned', handleUpdate);
 
     return () => {
       sub1.unsubscribe();
@@ -71,6 +75,9 @@ export function useChannelRowUpdates(channel: Channel, currentUserId?: string) {
       sub9.unsubscribe();
       sub10.unsubscribe();
       sub11.unsubscribe();
+      sub12.unsubscribe();
+      sub13.unsubscribe();
+      sub14.unsubscribe();
     };
   }, [channel, currentUserId]);
 

package/src/hooks/useMessageActions.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { useChatClient } from './useChatClient';
 import { useChannelCapabilities } from './useChannelCapabilities';
 import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
+import { isSignalMessage, isSystemMessage } from '../messageTypeUtils';
 
 export type MessageActionList = {
   canEdit: boolean;
@@ -23,7 +24,7 @@ export type MessageActionList = {
 
 export const useMessageActions = (message: FormatMessageResponse, isOwnMessage: boolean): MessageActionList => {
   const { activeChannel, client } = useChatClient();
-  const { isTeamChannel: isTeam, isOwner, hasCapability } = useChannelCapabilities();
+  const { isGroupChannel: isTeam, isOwner, hasCapability } = useChannelCapabilities();
 
   // Only depend on the specific message fields we actually read
   const messageType = message.type;
@@ -50,18 +51,18 @@ export const useMessageActions = (message: FormatMessageResponse, isOwnMessage:
       };
     }
 
-    const isSystem = messageType === 'system';
-    const isSignal = messageType === 'signal';
+    const isSystem = isSystemMessage(message);
+    const isSignal = isSignalMessage(message);
     const isPinned = isPinnedFlag;
 
     const canEdit = !isSystem && !isSignal && isOwnMessage;
-    
+
     // Delete for everyone:
     // + Team channel: only the owner can perform this action natively.
     // + Messaging channel: only own messages can be deleted
     const canDeleteForEveryoneTeam = isTeam && isOwner;
     const canDeleteForEveryoneMessaging = !isTeam && isOwnMessage;
-    
+
     const canDelete = !isSystem && (canDeleteForEveryoneTeam || canDeleteForEveryoneMessaging);
     const canDeleteForMe = !isSystem;
     const canReply = !isSystem && !isSignal;
@@ -74,14 +75,27 @@ export const useMessageActions = (message: FormatMessageResponse, isOwnMessage:
     const hasCapDelete = !isTeam || isOwner || (isOwnMessage && hasCapability('delete-own-message'));
     // Apply the delete-own-message capability to the "delete for me" action for own messages
     const hasCapDeleteForMe = !isTeam || isOwner || !isOwnMessage || hasCapability('delete-own-message');
-    
+
     const hasCapReply = hasCapability('send-reply');
     const hasCapQuote = hasCapability('quote-message');
     const hasCapPin = hasCapability('pin-message');
 
-    return { 
-      canEdit, canDelete, canDeleteForMe, canReply, canQuote, canForward, canPin, canCopy, isPinned,
-      hasCapEdit, hasCapDelete, hasCapDeleteForMe, hasCapPin, hasCapReply, hasCapQuote 
+    return {
+      canEdit,
+      canDelete,
+      canDeleteForMe,
+      canReply,
+      canQuote,
+      canForward,
+      canPin,
+      canCopy,
+      isPinned,
+      hasCapEdit,
+      hasCapDelete,
+      hasCapDeleteForMe,
+      hasCapPin,
+      hasCapReply,
+      hasCapQuote,
     };
   }, [activeChannel, isTeam, isOwner, hasCapability, messageType, message.text, isPinnedFlag, isOwnMessage]); // Use capabilities from hook
 };