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

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;
+}

package/src/hooks/useOnlineUsers.ts

@@ -0,0 +1,115 @@
+import { useState, useEffect, useMemo, useRef } from 'react';
+import type { Channel, Event } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+import { isFriendChannel } from '../channelRoleUtils';
+
+/**
+ * Bulk hook that returns a `Set<string>` of user IDs that are currently online.
+ *
+ * Only users who are "friends" (exist in a direct channel where both
+ * members have `owner` role) are tracked. The status is derived from
+ * `channel.state.watchers` and kept in sync via `user.watching.start`
+ * and `user.watching.stop` WebSocket events at the **client** level
+ * for efficiency (single subscription instead of N per-channel ones).
+ *
+ * Usage in ChannelList: `const onlineUsers = useOnlineUsers(channels);`
+ * Then check: `onlineUsers.has(userId)`.
+ *
+ * @param channels – The full list of loaded channels (from ChannelList).
+ */
+export function useOnlineUsers(channels: Channel[]): Set<string> {
+  const { client } = useChatClient();
+  const currentUserId = client.userID;
+
+  // Build a map: friendUserId → Channel (the friend channel).
+  // This memoizes the friend channel lookup so we only iterate once per channels change.
+  const friendMap = useMemo(() => {
+    const map = new Map<string, Channel>();
+    if (!currentUserId) return map;
+
+    for (const ch of channels) {
+      const members = ch.state?.members;
+      if (!members) continue;
+
+      // Find the "other" user in this channel
+      for (const memberId of Object.keys(members)) {
+        if (memberId === currentUserId) continue;
+        if (isFriendChannel(ch, memberId, currentUserId)) {
+          map.set(memberId, ch);
+        }
+      }
+    }
+    return map;
+  }, [channels, currentUserId]);
+
+  // Compute the initial set of online users from watchers.
+  const computeOnlineSet = (): Set<string> => {
+    const set = new Set<string>();
+    for (const [userId, ch] of friendMap.entries()) {
+      if (ch.state?.watchers?.[userId]) {
+        set.add(userId);
+      }
+    }
+    return set;
+  };
+
+  const [onlineUsers, setOnlineUsers] = useState<Set<string>>(() => computeOnlineSet());
+
+  // Keep friendMap in a ref so that event handlers always see the latest version.
+  const friendMapRef = useRef(friendMap);
+  friendMapRef.current = friendMap;
+
+  // Re-compute when friendMap changes (new channels loaded, channels array mutated).
+  useEffect(() => {
+    setOnlineUsers(computeOnlineSet());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [friendMap]);
+
+  // Subscribe at the client level for efficiency.
+  useEffect(() => {
+    if (!currentUserId) return;
+
+    const handleWatchingStart = (event: Event) => {
+      const userId = event.user?.id;
+      const eventCid = event.cid;
+      if (!userId || !eventCid) return;
+
+      // Check if this userId belongs to a tracked friend channel
+      const tracked = friendMapRef.current.get(userId);
+      if (tracked && tracked.cid === eventCid) {
+        setOnlineUsers((prev) => {
+          if (prev.has(userId)) return prev;
+          const next = new Set(prev);
+          next.add(userId);
+          return next;
+        });
+      }
+    };
+
+    const handleWatchingStop = (event: Event) => {
+      const userId = event.user?.id;
+      const eventCid = event.cid;
+      if (!userId || !eventCid) return;
+
+      const tracked = friendMapRef.current.get(userId);
+      if (tracked && tracked.cid === eventCid) {
+        setOnlineUsers((prev) => {
+          if (!prev.has(userId)) return prev;
+          const next = new Set(prev);
+          next.delete(userId);
+          return next;
+        });
+      }
+    };
+
+    const sub1 = client.on('user.watching.start', handleWatchingStart);
+    const sub2 = client.on('user.watching.stop', handleWatchingStop);
+
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+    };
+  }, [client, currentUserId]);
+
+  return onlineUsers;
+}

package/src/hooks/usePendingState.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { isPendingMember } from '../channelRoleUtils';
 
 /**
  * Hook that tracks whether the current user is in a 'pending' state for the given channel.
@@ -7,7 +8,7 @@ import type { Channel } from '@ermis-network/ermis-chat-sdk';
 export function usePendingState(channel: Channel | null | undefined, currentUserId?: string) {
   const [isPending, setIsPending] = useState<boolean>(() => {
     const membership = channel?.state?.membership || channel?.state?.members?.[currentUserId || ''];
-    return membership?.channel_role === 'pending' || (membership as Record<string, unknown>)?.role === 'pending';
+    return isPendingMember(membership?.channel_role as string);
   });
 
   useEffect(() => {
@@ -18,7 +19,7 @@ export function usePendingState(channel: Channel | null | undefined, currentUser
 
     const checkPending = () => {
       const membership = channel.state?.membership || channel.state?.members?.[currentUserId];
-      return membership?.channel_role === 'pending' || (membership as Record<string, unknown>)?.role === 'pending';
+      return isPendingMember(membership?.channel_role as string);
     };
 
     // Sync initial state
@@ -42,7 +43,9 @@ export function usePendingState(channel: Channel | null | undefined, currentUser
       if (eventUserId !== currentUserId) return; // Only react to own invite events
 
       const eventCid =
-        event.cid || (event.channel as Record<string, unknown>)?.cid || (event.channel_id ? `${event.channel_type}:${event.channel_id}` : undefined);
+        event.cid ||
+        (event.channel as Record<string, unknown>)?.cid ||
+        (event.channel_id ? `${event.channel_type}:${event.channel_id}` : undefined);
       if (eventCid === channel.cid) {
         defensiveUpdateState(event);
         setIsPending(checkPending());
@@ -52,10 +55,12 @@ export function usePendingState(channel: Channel | null | undefined, currentUser
     const client = channel.getClient();
     const sub1 = client.on('notification.invite_accepted', handleInviteAction);
     const sub2 = client.on('notification.invite_rejected', handleInviteAction);
+    const sub3 = client.on('notification.invite_messaging_skipped', handleInviteAction);
 
     return () => {
       sub1.unsubscribe();
       sub2.unsubscribe();
+      sub3.unsubscribe();
     };
   }, [channel, currentUserId]);
 

package/src/index.ts

@@ -13,6 +13,9 @@ export { useChannelListUpdates } from './hooks/useChannelListUpdates';
 export { useChannelRowUpdates } from './hooks/useChannelRowUpdates';
 export { useBannedState } from './hooks/useBannedState';
 export { useBlockedState } from './hooks/useBlockedState';
+export { useOnlineStatus } from './hooks/useOnlineStatus';
+export type { OnlineStatus } from './hooks/useOnlineStatus';
+export { useOnlineUsers } from './hooks/useOnlineUsers';
 export { usePendingState } from './hooks/usePendingState';
 
 // Components
@@ -32,7 +35,14 @@ export { ChannelHeader } from './components/ChannelHeader';
 export type { ChannelHeaderProps } from './components/ChannelHeader';
 export type { ChannelHeaderData } from './types';
 
-export type { MessageListProps, MessageBubbleProps, MessageItemProps, SystemMessageItemProps, DateSeparatorProps, JumpToLatestProps } from './types';
+export type {
+  MessageListProps,
+  MessageBubbleProps,
+  MessageItemProps,
+  SystemMessageItemProps,
+  DateSeparatorProps,
+  JumpToLatestProps,
+} from './types';
 
 export { VirtualMessageList } from './components/VirtualMessageList';
 
@@ -54,6 +64,44 @@ export { MessageQuickReactions } from './components/MessageQuickReactions';
 export { useMessageActions } from './hooks/useMessageActions';
 
 export { formatTime, getDateKey, formatDateLabel, getMessageUserId, replaceMentionsForPreview } from './utils';
+export {
+  isGroupChannel,
+  isDirectChannel,
+  isTopicChannel,
+  isPublicGroupChannel,
+  isGeneralProxy,
+  hasTopicsEnabled,
+  supportsBlocking,
+} from './channelTypeUtils';
+export {
+  CHANNEL_ROLES,
+  isPendingMember,
+  isSkippedMember,
+  isOwnerMember,
+  isFriendChannel,
+  canManageChannel,
+  canRemoveTargetMember,
+  canBanTargetMember,
+  canPromoteTargetMember,
+  canDemoteTargetMember,
+} from './channelRoleUtils';
+export type { ChannelRole } from './channelRoleUtils';
+
+export {
+  MESSAGE_TYPES,
+  ATTACHMENT_TYPES,
+  isSystemMessage,
+  isStickerMessage,
+  isRegularMessage,
+  isSignalMessage,
+  isImageAttachment,
+  isVideoAttachment,
+  isVoiceRecordingAttachment,
+  isLinkPreviewAttachment,
+  isImage,
+  isVideo,
+} from './messageTypeUtils';
+export type { MessageType, AttachmentType } from './messageTypeUtils';
 
 export {
   defaultMessageRenderers,
@@ -68,8 +116,17 @@ export {
 } from './components/MessageRenderers';
 export type { MessageRendererProps, AttachmentProps } from './components/MessageRenderers';
 
+export { MediaLightbox } from './components/MediaLightbox';
+export type { MediaLightboxProps, MediaLightboxItem } from './types';
+
 export { MessageInput } from './components/MessageInput';
-export type { MessageInputProps, SendButtonProps, AttachButtonProps, EmojiPickerProps, EmojiButtonProps } from './components/MessageInput';
+export type {
+  MessageInputProps,
+  SendButtonProps,
+  AttachButtonProps,
+  EmojiPickerProps,
+  EmojiButtonProps,
+} from './components/MessageInput';
 
 export { FilesPreview } from './components/FilesPreview';
 export type { FilePreviewItem, FilesPreviewProps } from './components/FilesPreview';
@@ -109,7 +166,7 @@ export {
   DefaultChannelInfoHeader,
   DefaultChannelInfoCover,
   DefaultChannelInfoActions,
-  DefaultChannelInfoTabs
+  DefaultChannelInfoTabs,
 } from './components/ChannelInfo';
 
 export { Modal } from './components/Modal';
@@ -134,12 +191,7 @@ export type {
 } from './types';
 
 export { UserPicker } from './components/UserPicker';
-export type {
-  UserPickerProps,
-  UserPickerUser,
-  UserPickerItemProps,
-  UserPickerSelectedBoxProps,
-} from './types';
+export type { UserPickerProps, UserPickerUser, UserPickerItemProps, UserPickerSelectedBoxProps } from './types';
 
 export { CreateChannelModal } from './components/CreateChannelModal';
 export type { CreateChannelModalProps } from './types';

package/src/messageTypeUtils.ts

@@ -0,0 +1,64 @@
+export const MESSAGE_TYPES = {
+  REGULAR: 'regular',
+  SYSTEM: 'system',
+  STICKER: 'sticker',
+  SIGNAL: 'signal',
+  ERROR: 'error',
+} as const;
+
+export const ATTACHMENT_TYPES = {
+  IMAGE: 'image',
+  VIDEO: 'video',
+  VOICE_RECORDING: 'voiceRecording',
+  LINK_PREVIEW: 'linkPreview',
+  FILE: 'file',
+  AUDIO: 'audio',
+} as const;
+
+export type MessageType = (typeof MESSAGE_TYPES)[keyof typeof MESSAGE_TYPES] | string;
+export type AttachmentType = (typeof ATTACHMENT_TYPES)[keyof typeof ATTACHMENT_TYPES] | string;
+
+// Helpers cho message
+export function isSystemMessage(message: any): boolean {
+  return message?.type === MESSAGE_TYPES.SYSTEM;
+}
+
+export function isStickerMessage(message: any): boolean {
+  return message?.type === MESSAGE_TYPES.STICKER;
+}
+
+export function isRegularMessage(message: any): boolean {
+  return !message?.type || message?.type === MESSAGE_TYPES.REGULAR;
+}
+
+export function isSignalMessage(message: any): boolean {
+  return message?.type === MESSAGE_TYPES.SIGNAL;
+}
+
+// Helpers cho attachment
+export function isImageAttachment(attachment: any): boolean {
+  return attachment?.type === ATTACHMENT_TYPES.IMAGE;
+}
+
+export function isVideoAttachment(attachment: any): boolean {
+  return attachment?.type === ATTACHMENT_TYPES.VIDEO;
+}
+
+export function isVoiceRecordingAttachment(attachment: any): boolean {
+  return attachment?.type === ATTACHMENT_TYPES.VOICE_RECORDING;
+}
+
+export function isLinkPreviewAttachment(attachment: any): boolean {
+  return attachment?.type === ATTACHMENT_TYPES.LINK_PREVIEW;
+}
+
+export function isImage(attachment: any): boolean {
+  return Boolean(
+    isImageAttachment(attachment) ||
+      (!attachment?.type && (attachment?.mime_type?.startsWith('image/') || attachment?.image_url)),
+  );
+}
+
+export function isVideo(attachment: any): boolean {
+  return !!(isVideoAttachment(attachment) || (!attachment.type && attachment.mime_type?.startsWith('video/')));
+}

package/src/styles/_channel-list.css

@@ -57,6 +57,40 @@
   text-overflow: ellipsis;
 }
 
+/* --- Online Status Indicator --- */
+.ermis-channel-header__online-status {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 1px;
+}
+
+.ermis-channel-header__online-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--ermis-radius-full);
+  flex-shrink: 0;
+  transition: background-color var(--ermis-transition);
+}
+
+.ermis-channel-header__online-dot--online {
+  background-color: var(--ermis-color-success);
+}
+
+.ermis-channel-header__online-dot--offline {
+  background-color: var(--ermis-text-muted);
+}
+
+.ermis-channel-header__online-label {
+  font-size: var(--ermis-font-size-xs);
+  color: var(--ermis-text-muted);
+  line-height: 1;
+}
+
+.ermis-channel-header__online-status--online .ermis-channel-header__online-label {
+  color: var(--ermis-color-success);
+}
+
 .ermis-channel-header__info {
   flex: 1;
 }
@@ -121,6 +155,31 @@
   flex: 1;
 }
 
+/* --- Avatar wrapper with online dot overlay --- */
+.ermis-channel-list__item-avatar-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.ermis-channel-list__online-dot {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: var(--ermis-radius-full);
+  border: 2px solid var(--ermis-bg-secondary);
+  transition: background-color var(--ermis-transition);
+}
+
+.ermis-channel-list__online-dot--online {
+  background-color: var(--ermis-color-success);
+}
+
+.ermis-channel-list__online-dot--offline {
+  background-color: var(--ermis-text-muted);
+}
+
 .ermis-channel-list__item-top-row {
   display: flex;
   align-items: baseline;