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

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;

package/src/styles/_media-lightbox.css

@@ -0,0 +1,263 @@
+/* ============================================================
+   Media Lightbox – Full-screen overlay for images & videos
+   BEM: .ermis-lightbox__{element}--{modifier}
+   ============================================================ */
+
+/* ----------------------------------------------------------
+   Overlay & backdrop
+   ---------------------------------------------------------- */
+.ermis-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  animation: ermis-lightbox-fade-in 0.2s ease-out;
+}
+
+.ermis-lightbox__backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.92);
+  backdrop-filter: blur(8px);
+}
+
+@keyframes ermis-lightbox-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ----------------------------------------------------------
+   Header: counter + close
+   ---------------------------------------------------------- */
+.ermis-lightbox__header {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  min-height: 48px;
+}
+
+.ermis-lightbox__counter {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  user-select: none;
+}
+
+.ermis-lightbox__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.ermis-lightbox__action-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.85);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.ermis-lightbox__action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+/* ----------------------------------------------------------
+   Content area
+   ---------------------------------------------------------- */
+.ermis-lightbox__content {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 60px;
+  overflow: hidden;
+  cursor: default;
+}
+
+/* ----------------------------------------------------------
+   Image
+   ---------------------------------------------------------- */
+.ermis-lightbox__image {
+  max-width: 90vw;
+  max-height: 80vh;
+  object-fit: contain;
+  border-radius: 4px;
+  user-select: none;
+  transition: transform 0.15s ease;
+  animation: ermis-lightbox-zoom-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.ermis-lightbox__image--zoomed {
+  transition: none;
+}
+
+@keyframes ermis-lightbox-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ----------------------------------------------------------
+   Video
+   ---------------------------------------------------------- */
+.ermis-lightbox__video {
+  max-width: 90vw;
+  max-height: 80vh;
+  border-radius: 4px;
+  background: #000;
+  outline: none;
+  animation: ermis-lightbox-zoom-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ----------------------------------------------------------
+   Navigation buttons
+   ---------------------------------------------------------- */
+.ermis-lightbox__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 3;
+  background: rgba(255, 255, 255, 0.08);
+  border: none;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.75);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
+}
+
+.ermis-lightbox__nav:hover {
+  background: rgba(255, 255, 255, 0.18);
+  color: #fff;
+}
+
+.ermis-lightbox__nav--prev {
+  left: 12px;
+}
+
+.ermis-lightbox__nav--prev:hover {
+  transform: translateY(-50%) translateX(-2px);
+}
+
+.ermis-lightbox__nav--next {
+  right: 12px;
+}
+
+.ermis-lightbox__nav--next:hover {
+  transform: translateY(-50%) translateX(2px);
+}
+
+/* ----------------------------------------------------------
+   Filename
+   ---------------------------------------------------------- */
+.ermis-lightbox__filename {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  padding: 8px 16px 16px;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+/* ----------------------------------------------------------
+   Clickable attachment overlay (hover effect on images/videos in messages)
+   ---------------------------------------------------------- */
+.ermis-attachment--clickable {
+  cursor: pointer;
+  position: relative;
+}
+
+.ermis-attachment--clickable::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0);
+  border-radius: inherit;
+  transition: background-color 0.2s ease;
+  pointer-events: none;
+}
+
+.ermis-attachment--clickable:hover::after {
+  background: rgba(0, 0, 0, 0.12);
+}
+
+/* Zoom hint icon on hover */
+.ermis-attachment__overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.8);
+  z-index: 2;
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.ermis-attachment--clickable:hover .ermis-attachment__overlay {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* ----------------------------------------------------------
+   Responsive: small viewports
+   ---------------------------------------------------------- */
+@media (max-width: 768px) {
+  .ermis-lightbox__content {
+    padding: 0 12px;
+  }
+
+  .ermis-lightbox__image,
+  .ermis-lightbox__video {
+    max-width: 100vw;
+    max-height: 75vh;
+  }
+
+  .ermis-lightbox__nav {
+    width: 36px;
+    height: 36px;
+  }
+
+  .ermis-lightbox__nav--prev {
+    left: 4px;
+  }
+
+  .ermis-lightbox__nav--next {
+    right: 4px;
+  }
+}