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

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,15 +13,21 @@ 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
 export { Avatar } from './components/Avatar';
 export type { AvatarProps } from './components/Avatar';
 
-export { ChannelList, ChannelItem } from './components/ChannelList';
+export { ChannelList, ChannelItem, ChannelTopicGroup } from './components/ChannelList';
 export type { ChannelListProps, ChannelItemProps } from './components/ChannelList';
 
+export { DefaultChannelActions, computeDefaultActions } from './components/ChannelActions';
+export type { ChannelAction, ChannelActionsProps } from './types';
+
 export { Channel } from './components/Channel';
 export type { ChannelProps } from './components/Channel';
 
@@ -29,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';
 
@@ -51,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,
@@ -65,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';
@@ -94,6 +154,8 @@ export type { ReplyPreviewProps } from './types';
 export { ForwardMessageModal } from './components/ForwardMessageModal';
 export type { ForwardMessageModalProps, ForwardChannelItemProps } from './components/ForwardMessageModal';
 
+export { TopicModal } from './components/TopicModal';
+
 export { TypingIndicator } from './components/TypingIndicator';
 export type { TypingIndicatorProps } from './components/TypingIndicator';
 export { useTypingIndicator } from './hooks/useTypingIndicator';
@@ -104,7 +166,7 @@ export {
   DefaultChannelInfoHeader,
   DefaultChannelInfoCover,
   DefaultChannelInfoActions,
-  DefaultChannelInfoTabs
+  DefaultChannelInfoTabs,
 } from './components/ChannelInfo';
 
 export { Modal } from './components/Modal';
@@ -129,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-info.css

@@ -74,6 +74,27 @@
   margin: 0;
 }
 
+.ermis-channel-info__parent-name {
+  font-size: 13px;
+  color: var(--ermis-accent);
+  margin-top: -4px;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.ermis-channel-info__topic-emoji-avatar {
+  font-size: 48px;
+  line-height: 80px;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ermis-bg-secondary);
+  border-radius: 50%;
+  margin-bottom: 16px;
+}
+
 .ermis-channel-info__cover-edit-btn {
   background: transparent;
   border: none;