@ermis-network/ermis-chat-react 2.0.0 → 2.0.1

package/src/hooks/useTopicGroupUpdates.ts

@@ -4,6 +4,7 @@ import { isPendingMember, isSkippedMember } from '../channelRoleUtils';
 import { isDirectChannel } from '../channelTypeUtils';
 import { getLastMessagePreview } from '../utils';
 import { SystemMessageTranslations, SignalMessageTranslations } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
 
 /** Preview data for the most recent message across the topic group */
 export type LatestMessagePreview = {
@@ -21,6 +22,8 @@ export type TopicGroupUpdatesOptions = {
   videoMessageLabel?: React.ReactNode;
   voiceRecordingMessageLabel?: React.ReactNode;
   fileMessageLabel?: React.ReactNode;
+  encryptedMessageLabel?: React.ReactNode;
+  encryptedMessageUnavailableLabel?: React.ReactNode;
   systemMessageTranslations?: SystemMessageTranslations;
   signalMessageTranslations?: SignalMessageTranslations;
 };
@@ -46,12 +49,24 @@ export function useTopicGroupUpdates(
   updateCount: number;
   latestMessagePreview: LatestMessagePreview | null;
 } {
+  const { client: chatClient, activeChannel } = useChatClient();
   const [updateCount, setUpdateCount] = useState(0);
   const bump = useCallback(() => setUpdateCount((c) => c + 1), []);
 
   // Subscribe to realtime events on parent + all topics
   useEffect(() => {
     const subs: { unsubscribe: () => void }[] = [];
+    const client = channel.getClient();
+    const isTopicGroupCid = (cid?: string) => {
+      if (!cid) return false;
+      if (cid === channel.cid) return true;
+      return (channel.state?.topics || []).some((topic: Channel) => topic.cid === cid);
+    };
+    const handleE2eePreviewUpdate = (event: any) => {
+      if (isTopicGroupCid(event?.cid)) {
+        bump();
+      }
+    };
 
     // Parent channel events
     subs.push(channel.on('message.new', bump));
@@ -61,6 +76,9 @@ export function useTopicGroupUpdates(
     subs.push(channel.on('channel.topic.created', bump));
     subs.push(channel.on('channel.pinned', bump));
     subs.push(channel.on('channel.unpinned', bump));
+    subs.push(client.on('e2ee.message_decrypted' as any, handleE2eePreviewUpdate));
+    subs.push(client.on('e2ee.local_messages_loaded' as any, handleE2eePreviewUpdate));
+    subs.push(client.on('e2ee.post_join_sync' as any, handleE2eePreviewUpdate));
 
     // Topic children events
     const currentTopics = channel.state?.topics || [];
@@ -90,17 +108,19 @@ export function useTopicGroupUpdates(
 
   // Helper: check if user is excluded from unread counting
   const isExcludedUser = (ch: Channel): boolean => {
-    const ms = ch.state?.membership as Record<string, unknown> | undefined;
+    const client = ch.getClient();
+    const activeCh = client.activeChannels[ch.cid] || ch;
+    const ms = activeCh.state?.membership as Record<string, unknown> | undefined;
     if (!ms) return false;
     const isBannedSelf = Boolean(ms.banned);
     
     // Topic support: check parent channel's ban status
-    const parentCid = ch.data?.parent_cid as string | undefined;
-    const parentChannel = parentCid ? ch.getClient().activeChannels[parentCid] : undefined;
+    const parentCid = activeCh.data?.parent_cid as string | undefined;
+    const parentChannel = parentCid ? client.activeChannels[parentCid] : undefined;
     const isBannedParent = Boolean(parentChannel?.state?.membership?.banned);
     
     const isBanned = isBannedSelf || isBannedParent;
-    const isBlocked = isDirectChannel(ch) && Boolean(ms.blocked);
+    const isBlocked = isDirectChannel(activeCh) && Boolean(ms.blocked);
     const isPending = isPendingMember(ms.channel_role as string);
     const isSkipped = isSkippedMember(ms.channel_role as string);
     return isBanned || isBlocked || isPending || isSkipped;
@@ -109,8 +129,10 @@ export function useTopicGroupUpdates(
   // Helper: get unread count for a channel (reads from SDK state directly)
   const getUnreadCount = (ch: Channel): number => {
     if (!currentUserId || isExcludedUser(ch)) return 0;
-    // Primary: use the SDK's tracked unreadCount
-    const state = ch.state as unknown as Record<string, unknown> | undefined;
+    // Primary: use the SDK's tracked unreadCount from activeChannels to avoid stale state
+    const client = ch.getClient();
+    const activeCh = client.activeChannels[ch.cid] || ch;
+    const state = activeCh.state as unknown as Record<string, unknown> | undefined;
     const count = (state?.unreadCount as number) ?? 0;
     return count;
   };
@@ -118,7 +140,9 @@ export function useTopicGroupUpdates(
   // Sort topics: pinned first → last activity descending
   const topics = useMemo(() => {
     const allTopics = channel.state?.topics || [];
-    return [...allTopics].sort((a: Channel, b: Channel) => {
+    const client = channel.getClient();
+    const upToDateTopics = allTopics.map(t => client.activeChannels[t.cid] || t);
+    return upToDateTopics.sort((a: Channel, b: Channel) => {
       const aPinned = a.data?.is_pinned === true;
       const bPinned = b.data?.is_pinned === true;
       if (aPinned && !bPinned) return -1;
@@ -130,16 +154,29 @@ export function useTopicGroupUpdates(
 
   // Aggregated unread count across parent + all topics
   const aggregatedUnreadCount = useMemo(() => {
-    let total = getUnreadCount(channel);
+    const client = channel.getClient();
+    const activeParent = client.activeChannels[channel.cid] || channel;
+    
+    // Ignore the currently active channel's unread count to match UI behavior
+    // where active channels don't show unread badges.
+    const activeChannelCid = Object.values(client.activeChannels || {}).find(c => c.state && c.cid === activeChannel?.cid)?.cid || activeChannel?.cid;
+    
+    let total = 0;
+    if (activeParent.cid !== activeChannelCid) {
+      total += getUnreadCount(activeParent);
+    }
 
     const allTopics = channel.state?.topics || [];
     allTopics.forEach((topic: Channel) => {
-      total += getUnreadCount(topic);
+      const activeTopic = client.activeChannels[topic.cid] || topic;
+      if (activeTopic.cid !== activeChannelCid) {
+        total += getUnreadCount(activeTopic);
+      }
     });
 
     return total;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channel, channel.state?.topics, currentUserId, updateCount]);
+  }, [channel, channel.state?.topics, currentUserId, updateCount, activeChannel?.cid]);
 
   const hasUnread = aggregatedUnreadCount > 0;
 
@@ -188,10 +225,11 @@ export function useTopicGroupUpdates(
     options?.videoMessageLabel,
     options?.voiceRecordingMessageLabel,
     options?.fileMessageLabel,
+    options?.encryptedMessageLabel,
+    options?.encryptedMessageUnavailableLabel,
     options?.systemMessageTranslations,
     options?.signalMessageTranslations,
   ]);
 
   return { topics, aggregatedUnreadCount, hasUnread, updateCount, latestMessagePreview };
 }
-

package/src/index.ts

@@ -27,6 +27,9 @@ export { useTopicGroupUpdates } from './hooks/useTopicGroupUpdates';
 export { useDragAndDrop } from './hooks/useDragAndDrop';
 export { useMessageSend } from './hooks/useMessageSend';
 export { useFileUpload } from './hooks/useFileUpload';
+export { useE2eeFileUpload } from './hooks/useE2eeFileUpload';
+export { useE2eeAttachmentRenderer } from './hooks/useE2eeAttachmentRenderer';
+export { usePendingE2eeSends } from './hooks/usePendingE2eeSends';
 export { useEmojiPicker } from './hooks/useEmojiPicker';
 export { useStickerPicker } from './hooks/useStickerPicker';
 export type { UseStickerPickerOptions } from './hooks/useStickerPicker';
@@ -184,6 +187,8 @@ export { useChannelMessages, markChannelAsFullyQueried } from './hooks/useChanne
 export type { UseChannelMessagesOptions } from './hooks/useChannelMessages';
 
 export { useForwardMessage } from './hooks/useForwardMessage';
+export { useRecoveryPin } from './hooks/useRecoveryPin';
+export type { UseRecoveryPinReturn, RecoveryPinStatus, RecoveryRestoredMessage, RecoveryStatusInfo } from './hooks/useRecoveryPin';
 
 export { QuotedMessagePreview } from './components/QuotedMessagePreview';
 export type { QuotedMessagePreviewProps } from './components/QuotedMessagePreview';
@@ -245,6 +250,24 @@ export type { UserPickerProps, UserPickerUser, UserPickerItemProps, UserPickerSe
 
 export { CreateChannelModal } from './components/CreateChannelModal';
 export type { CreateChannelModalProps } from './types';
+export {
+  RecoveryPinSetup,
+  RecoveryPinRestore,
+  RecoveryPinChange,
+  RecoveryStatus,
+  RecoveryGap,
+  RecoveryGate,
+  RecoveryRestoreProgress,
+} from './components/RecoveryPin';
+export type {
+  RecoveryPinSetupProps,
+  RecoveryPinRestoreProps,
+  RecoveryPinChangeProps,
+  RecoveryStatusProps,
+  RecoveryGapProps,
+  RecoveryGateProps,
+  RecoveryRestoreProgressProps,
+} from './components/RecoveryPin';
 
 // Call Components
 export { ErmisCallContext } from './context/ErmisCallContext';

package/src/messageTypeUtils.ts

@@ -63,6 +63,20 @@ export function isVideo(attachment: any): boolean {
   return !!(isVideoAttachment(attachment) || (!attachment.type && attachment.mime_type?.startsWith('video/')));
 }
 
+export function isAudioAttachment(attachment: any): boolean {
+  return attachment?.type === ATTACHMENT_TYPES.AUDIO;
+}
+
+export function isAudio(attachment: any): boolean {
+  return !!(
+    isAudioAttachment(attachment) ||
+    isVoiceRecordingAttachment(attachment) ||
+    attachment.mime_type?.startsWith('audio/') ||
+    attachment.file_name?.toLowerCase().endsWith('.mp3') ||
+    attachment.title?.toLowerCase().endsWith('.mp3')
+  );
+}
+
 export const MESSAGE_DISPLAY_TYPES = {
   NORMAL: 'normal',
   DELETED: 'deleted',

package/src/styles/_channel-info.css

@@ -500,6 +500,15 @@
   margin-left: 2px;
 }
 
+.ermis-channel-info__media-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: ermis-lightbox-spin 0.8s linear infinite;
+}
+
 /* ============================================
    Links List
    ============================================ */

package/src/styles/_channel-list.css

@@ -4,10 +4,10 @@
 .ermis-channel-header {
   display: flex;
   align-items: center;
-  gap: var(--ermis-spacing-md);
+  gap: var(--ermis-spacing-sm);
   padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
   border-bottom: 1px solid var(--ermis-border);
-  background-color: var(--ermis-bg-secondary);
+  background-color: var(--ermis-bg-primary);
   font-family: var(--ermis-font-family);
 }
 
@@ -37,15 +37,15 @@
 }
 
 .ermis-channel-header__topic-avatar {
-  width: 32px;
-  height: 32px;
-  min-width: 32px;
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
   border-radius: var(--ermis-radius-md);
   background-color: var(--ermis-bg-primary);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
+  font-size: 24px;
   color: var(--ermis-text-secondary);
 }
 
@@ -132,7 +132,7 @@
   display: flex;
   align-items: center;
   gap: var(--ermis-spacing-md);
-  padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
+  padding: calc(var(--ermis-spacing-md) - 0.05rem) var(--ermis-spacing-lg);
   cursor: pointer;
   border-left: 2px solid transparent;
   transition: background-color var(--ermis-transition), border-color var(--ermis-transition);
@@ -180,6 +180,31 @@
   background-color: var(--ermis-text-muted);
 }
 
+.ermis-channel-list__avatar-unread-badge {
+  display: none;
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: var(--ermis-radius-full);
+  background-color: var(--ermis-color-danger, #ef4444);
+  color: #fff;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  border: 1.5px solid var(--ermis-bg-primary);
+  z-index: 2;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.channel-sidebar-collapsed .ermis-channel-list__avatar-unread-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .ermis-channel-list__item-top-row {
   display: flex;
   align-items: baseline;
@@ -196,7 +221,7 @@
 }
 
 .ermis-channel-list__item-name {
-  font-size: var(--ermis-font-size-sm);
+  font-size: calc(var(--ermis-font-size-sm) + 1px);
   font-weight: 500;
   color: var(--ermis-text-primary);
   white-space: nowrap;
@@ -214,7 +239,7 @@
 }
 
 .ermis-channel-list__item-last-message {
-  font-size: var(--ermis-font-size-xs);
+  font-size: calc(var(--ermis-font-size-sm));
   color: var(--ermis-text-muted);
   white-space: nowrap;
   overflow: hidden;
@@ -266,8 +291,7 @@
 }
 
 .ermis-channel-list__item-last-message-source {
-  color: var(--ermis-accent);
-  font-weight: 500;
+  color: var(--ermis-text-secondary);
 }
 
 .ermis-channel-list__item-actions-wrapper,
@@ -312,13 +336,12 @@
 
 /* --- Unread channel indicator --- */
 .ermis-channel-list__item--unread .ermis-channel-list__item-name {
-  font-weight: 700;
+  font-weight: 600;
   color: var(--ermis-text-primary);
 }
 
 .ermis-channel-list__item--unread .ermis-channel-list__item-last-message {
   color: var(--ermis-text-secondary);
-  font-weight: 600;
 }
 
 .ermis-channel-list__unread-badge {
@@ -524,4 +547,4 @@
 
 .ermis-channel-list__error-retry:hover svg {
   transform: rotate(180deg);
-}
+}

package/src/styles/_media-lightbox.css

@@ -23,8 +23,12 @@
 }
 
 @keyframes ermis-lightbox-fade-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* ----------------------------------------------------------
@@ -74,6 +78,11 @@
   color: #fff;
 }
 
+.ermis-lightbox__action-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 /* ----------------------------------------------------------
    Content area
    ---------------------------------------------------------- */
@@ -157,8 +166,32 @@
   animation: ermis-lightbox-spin 0.8s linear infinite;
 }
 
+.ermis-lightbox__video-retry {
+  flex-direction: column;
+  gap: 10px;
+}
+
+.ermis-lightbox__progress-label {
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.ermis-lightbox__media-placeholder {
+  width: min(80vw, 720px);
+  height: min(60vh, 420px);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.ermis-lightbox__image--poster {
+  filter: none;
+}
+
 @keyframes ermis-lightbox-spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 /* ----------------------------------------------------------