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

package/src/components/PendingOverlay.tsx

@@ -10,6 +10,10 @@ export type PendingOverlayProps = {
   rejectLabel: string;
   onAccept: () => void;
   onReject: () => void;
+  /** Label for the skip button (direct messaging channels) */
+  skipLabel?: string;
+  /** Handler for the skip action (direct messaging channels) */
+  onSkip?: () => void;
   AvatarComponent: React.ComponentType<AvatarProps>;
 };
 
@@ -22,6 +26,8 @@ export const PendingOverlay: React.FC<PendingOverlayProps> = React.memo(({
   rejectLabel,
   onAccept,
   onReject,
+  skipLabel,
+  onSkip,
   AvatarComponent,
 }) => (
   <div className="ermis-message-list__pending-overlay">
@@ -31,7 +37,11 @@ export const PendingOverlay: React.FC<PendingOverlayProps> = React.memo(({
       <div className="ermis-message-list__pending-channel-name">{channelName}</div>
       <span className="ermis-message-list__pending-overlay-subtitle">{subtitle}</span>
       <div className="ermis-message-list__pending-actions">
-        <button className="ermis-message-list__reject-btn" onClick={onReject}>{rejectLabel}</button>
+        {onSkip ? (
+          <button className="ermis-message-list__reject-btn" onClick={onSkip}>{skipLabel || 'Skip'}</button>
+        ) : (
+          <button className="ermis-message-list__reject-btn" onClick={onReject}>{rejectLabel}</button>
+        )}
         <button className="ermis-message-list__accept-btn" onClick={onAccept}>{acceptLabel}</button>
       </div>
     </div>

package/src/components/PinnedMessages.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { Avatar } from './Avatar';
+import { isStickerMessage } from '../messageTypeUtils';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
 import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import type { PinnedMessageItemProps, PinnedMessagesProps } from '../types';
@@ -25,7 +26,7 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
   }, [activeChannel?.state]);
 
   let previewText = message.text || '';
-  const isSticker = message.type === 'sticker';
+  const isSticker = isStickerMessage(message);
 
   if (!previewText && hasAttachments) {
     const firstAttach = message.attachments![0];

package/src/components/ReplyPreview.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
+import { isStickerMessage } from '../messageTypeUtils';
 import type { ReplyPreviewProps } from '../types';
 
 const MAX_PREVIEW_LENGTH = 120;
@@ -53,7 +54,7 @@ export const ReplyPreview: React.FC<ReplyPreviewProps> = React.memo(({
   const formattedText = useMemo(() => replaceMentionsForPreview(rawText, message, userMap), [rawText, message, userMap]);
   const hasText = !!formattedText.trim();
   const hasAttachments = message.attachments && message.attachments.length > 0;
-  const isSticker = message.type === 'sticker';
+  const isSticker = isStickerMessage(message);
   const attachmentSummary = hasAttachments ? getAttachmentSummary(message.attachments!) : '';
 
   // Build preview content

package/src/components/SkippedOverlay.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { AvatarProps } from '../types';
+
+export type SkippedOverlayProps = {
+  channelImage?: string;
+  channelName?: string;
+  title: string;
+  subtitle: string;
+  acceptLabel: string;
+  onAccept: () => void;
+  AvatarComponent: React.ComponentType<AvatarProps>;
+};
+
+export const SkippedOverlay: React.FC<SkippedOverlayProps> = React.memo(({
+  channelImage,
+  channelName,
+  title,
+  subtitle,
+  acceptLabel,
+  onAccept,
+  AvatarComponent,
+}) => (
+  <div className="ermis-message-list__pending-overlay">
+    <div className="ermis-message-list__pending-card">
+      <AvatarComponent image={channelImage} name={channelName} size={64} className="ermis-message-list__pending-avatar" />
+      <span className="ermis-message-list__pending-overlay-title">{title}</span>
+      <div className="ermis-message-list__pending-channel-name">{channelName}</div>
+      <span className="ermis-message-list__pending-overlay-subtitle">{subtitle}</span>
+      <div className="ermis-message-list__pending-actions">
+        <button className="ermis-message-list__accept-btn" onClick={onAccept}>{acceptLabel}</button>
+      </div>
+    </div>
+  </div>
+));
+
+SkippedOverlay.displayName = 'SkippedOverlay';

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,
@@ -22,6 +24,7 @@ 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';
@@ -78,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
    ---------------------------------------------------------- */
@@ -115,14 +135,26 @@ 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;
@@ -134,7 +166,20 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   messagesRef.current = messages;
   const currentUserId = client.userID;
   const currentUserRole = currentUserId ? activeChannel?.state?.members?.[currentUserId]?.channel_role : undefined;
-  const canManageTopic = currentUserRole === 'owner' || currentUserRole === 'moder';
+  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);
@@ -145,7 +190,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   const handleAcceptInvite = useCallback(async () => {
     if (!activeChannel) return;
     try {
-      const isPublicTeamOrMeeting = (activeChannel.type === 'team' || activeChannel.type === 'meeting') && Boolean(activeChannel.data?.public);
+      const isPublicTeamOrMeeting = isPublicGroupChannel(activeChannel);
       const action = isPublicTeamOrMeeting ? 'join' : 'accept';
       await activeChannel.acceptInvite(action);
     } catch (e: any) {
@@ -153,10 +198,25 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     }
   }, [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;
@@ -223,7 +283,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     }, [setHasMore, setHasNewer]),
   });
 
-  const hasOverlay = Boolean(isClosedTopic || isPending || isBanned || isBlocked);
+  const hasOverlay = Boolean(isClosedTopic || isPending || isBanned || isBlocked || isSkipped);
   const prevOverlayRef = useRef(hasOverlay);
 
   useEffect(() => {
@@ -393,6 +453,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   }
 
   if (isPending) {
+    const isDirect = activeChannel ? isDirectChannel(activeChannel) : false;
     return (
       <PendingOverlay
         channelImage={channelImage}
@@ -403,6 +464,22 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
         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}
       />
     );
@@ -430,6 +507,13 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
           : <EmptyStateIndicator />
       )}
 
+      {pendingInviteeName && (
+        <PendingInviteeNotificationComponent 
+          inviteeName={pendingInviteeName} 
+          label={typeof pendingInviteeLabel === 'function' ? pendingInviteeLabel(pendingInviteeName) : pendingInviteeLabel} 
+        />
+      )}
+
       <VList
         key={activeChannel?.cid || 'empty'}
         ref={vlistRef}

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,25 +19,21 @@ export const useChannelCapabilities = () => {
   }, [activeChannel]);
 
   const currentUserId = client?.userID || '';
-  const isTeamChannel = activeChannel?.type === 'team';
-  const isMeetingChannel = activeChannel?.type === 'meeting';
-  const isTeamOrMeetingChannel = isTeamChannel || isMeetingChannel;
+  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[] = isTeamOrMeetingChannel ? (activeChannel?.data as any)?.member_capabilities || [] : [];
+  const capabilities: string[] = isGroupCh ? (activeChannel?.data as any)?.member_capabilities || [] : [];
 
   const hasCapability = useCallback((cap: string) => {
-    return !isTeamOrMeetingChannel || isOwnerOrModerator || capabilities.includes(cap);
-  }, [isTeamOrMeetingChannel, isOwnerOrModerator, capabilities, updateTick]); // React to updateTick correctly
+    return !isGroupCh || isOwnerOrModerator || capabilities.includes(cap);
+  }, [isGroupCh, isOwnerOrModerator, capabilities, updateTick]); // React to updateTick correctly
 
   return {
-    isTeamChannel,
-    isMeetingChannel,
-    isTeamOrMeetingChannel,
+    isGroupChannel: isGroupCh,
     isOwner,
     isModerator,
     isOwnerOrModerator,

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,10 +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(() => {
@@ -225,6 +225,7 @@ export function useChannelListUpdates(
     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();
@@ -240,6 +241,7 @@ export function useChannelListUpdates(
       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) => {

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 { isTeamOrMeetingChannel: 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
 };

package/src/hooks/useOnlineStatus.ts

@@ -0,0 +1,71 @@
+import { useState, useEffect, useMemo } from 'react';
+import type { Channel, Event } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+import { isFriendChannel } from '../channelRoleUtils';
+
+export type OnlineStatus = 'online' | 'offline' | 'unknown';
+
+/**
+ * Hook that returns the online/offline status of a specific user.
+ *
+ * The status is determined by checking `channel.state.watchers` on the
+ * "friend" channel (direct channel where both members have `owner` role).
+ * Real-time updates are received via `user.watching.start` and
+ * `user.watching.stop` WebSocket events on that channel.
+ *
+ * Returns `'unknown'` if the user is not a friend (no qualifying channel found).
+ *
+ * @param userId   – The user ID to check the online status of.
+ * @param channels – The full list of loaded channels (from ChannelList).
+ */
+export function useOnlineStatus(
+  userId: string | undefined,
+  channels: Channel[],
+): OnlineStatus {
+  const { client } = useChatClient();
+  const currentUserId = client.userID;
+
+  // Find the friend channel for this user — memoized to avoid re-scans.
+  const friendChannel = useMemo(() => {
+    if (!userId || !currentUserId || userId === currentUserId) return null;
+    return channels.find((ch) => isFriendChannel(ch, userId, currentUserId)) || null;
+  }, [channels, userId, currentUserId]);
+
+  // Derive initial status from watchers state.
+  const [status, setStatus] = useState<OnlineStatus>(() => {
+    if (!friendChannel || !userId) return 'unknown';
+    return friendChannel.state?.watchers?.[userId] ? 'online' : 'offline';
+  });
+
+  useEffect(() => {
+    if (!friendChannel || !userId) {
+      setStatus('unknown');
+      return;
+    }
+
+    // Sync initial state (in case friendChannel ref changed).
+    setStatus(friendChannel.state?.watchers?.[userId] ? 'online' : 'offline');
+
+    const handleWatchingStart = (event: Event) => {
+      if (event.user?.id === userId) {
+        setStatus('online');
+      }
+    };
+
+    const handleWatchingStop = (event: Event) => {
+      if (event.user?.id === userId) {
+        setStatus('offline');
+      }
+    };
+
+    const sub1 = friendChannel.on('user.watching.start', handleWatchingStart);
+    const sub2 = friendChannel.on('user.watching.stop', handleWatchingStop);
+
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+    };
+  }, [friendChannel, userId]);
+
+  return status;
+}