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

package/src/hooks/useTopicGroupUpdates.ts

@@ -0,0 +1,197 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { isPendingMember, isSkippedMember } from '../channelRoleUtils';
+import { isDirectChannel } from '../channelTypeUtils';
+import { getLastMessagePreview } from '../utils';
+import { SystemMessageTranslations, SignalMessageTranslations } from '@ermis-network/ermis-chat-sdk';
+
+/** Preview data for the most recent message across the topic group */
+export type LatestMessagePreview = {
+  text: React.ReactNode;
+  user: string;
+  timestamp?: string | Date;
+  /** Topic name if the message came from a sub-topic, null if from general/parent */
+  sourceName: string | null;
+};
+
+export type TopicGroupUpdatesOptions = {
+  deletedMessageLabel?: React.ReactNode;
+  stickerMessageLabel?: React.ReactNode;
+  photoMessageLabel?: React.ReactNode;
+  videoMessageLabel?: React.ReactNode;
+  voiceRecordingMessageLabel?: React.ReactNode;
+  fileMessageLabel?: React.ReactNode;
+  systemMessageTranslations?: SystemMessageTranslations;
+  signalMessageTranslations?: SignalMessageTranslations;
+};
+
+/**
+ * Hook encapsulating realtime logic for a topic-enabled channel group.
+ *
+ * Subscribes to message and pin events on the parent channel AND all its
+ * topics to compute:
+ * - sorted topics list (pinned first, then by last activity)
+ * - aggregated unread count across parent + all topics
+ * - boolean flag indicating if any unread exists
+ * - latest message preview across parent + all topics
+ */
+export function useTopicGroupUpdates(
+  channel: Channel,
+  currentUserId?: string,
+  options?: TopicGroupUpdatesOptions
+): {
+  topics: Channel[];
+  aggregatedUnreadCount: number;
+  hasUnread: boolean;
+  updateCount: number;
+  latestMessagePreview: LatestMessagePreview | null;
+} {
+  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 }[] = [];
+
+    // Parent channel events
+    subs.push(channel.on('message.new', bump));
+    subs.push(channel.on('message.read', bump));
+    subs.push(channel.on('message.deleted', bump));
+    subs.push(channel.on('channel.updated', bump));
+    subs.push(channel.on('channel.topic.created', bump));
+    subs.push(channel.on('channel.pinned', bump));
+    subs.push(channel.on('channel.unpinned', bump));
+
+    // Topic children events
+    const currentTopics = channel.state?.topics || [];
+    currentTopics.forEach((t: Channel) => {
+      subs.push(t.on('message.new', bump));
+      subs.push(t.on('message.read', bump));
+      subs.push(t.on('message.deleted', bump));
+      subs.push(t.on('channel.updated', bump));
+      subs.push(t.on('channel.deleted', bump));
+      subs.push(t.on('channel.pinned', bump));
+      subs.push(t.on('channel.unpinned', bump));
+    });
+
+    return () => {
+      subs.forEach((s) => s.unsubscribe());
+    };
+  }, [channel, channel.state?.topics, channel.state?.topics?.length, bump]);
+
+  // Helper: get sort timestamp for a channel/topic
+  const getTopicTime = (t: Channel): number => {
+    const lastMsg = t.state?.latestMessages?.slice(-1)[0];
+    if (lastMsg?.created_at) return new Date(lastMsg.created_at).getTime();
+    if (t.data?.last_message_at) return new Date(t.data.last_message_at as string | Date).getTime();
+    if (t.data?.created_at) return new Date(t.data.created_at as string | Date).getTime();
+    return 0;
+  };
+
+  // Helper: check if user is excluded from unread counting
+  const isExcludedUser = (ch: Channel): boolean => {
+    const ms = ch.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 isBannedParent = Boolean(parentChannel?.state?.membership?.banned);
+    
+    const isBanned = isBannedSelf || isBannedParent;
+    const isBlocked = isDirectChannel(ch) && Boolean(ms.blocked);
+    const isPending = isPendingMember(ms.channel_role as string);
+    const isSkipped = isSkippedMember(ms.channel_role as string);
+    return isBanned || isBlocked || isPending || isSkipped;
+  };
+
+  // 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;
+    const count = (state?.unreadCount as number) ?? 0;
+    return count;
+  };
+
+  // Sort topics: pinned first → last activity descending
+  const topics = useMemo(() => {
+    const allTopics = channel.state?.topics || [];
+    return [...allTopics].sort((a: Channel, b: Channel) => {
+      const aPinned = a.data?.is_pinned === true;
+      const bPinned = b.data?.is_pinned === true;
+      if (aPinned && !bPinned) return -1;
+      if (!aPinned && bPinned) return 1;
+      return getTopicTime(b) - getTopicTime(a);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel.state?.topics, updateCount]);
+
+  // Aggregated unread count across parent + all topics
+  const aggregatedUnreadCount = useMemo(() => {
+    let total = getUnreadCount(channel);
+
+    const allTopics = channel.state?.topics || [];
+    allTopics.forEach((topic: Channel) => {
+      total += getUnreadCount(topic);
+    });
+
+    return total;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel, channel.state?.topics, currentUserId, updateCount]);
+
+  const hasUnread = aggregatedUnreadCount > 0;
+
+  // Latest message preview across parent + all topics (Option B: prefix topic name)
+  const latestMessagePreview = useMemo((): LatestMessagePreview | null => {
+    // If banned from the main group, hide previews for all sub-items
+    if (isExcludedUser(channel)) return null;
+
+    const allChannels = [channel, ...(channel.state?.topics || [])];
+
+    let bestTime = 0;
+    let bestChannel: Channel | null = null;
+
+    for (const ch of allChannels) {
+      const time = getTopicTime(ch);
+      if (time > bestTime) {
+        bestTime = time;
+        bestChannel = ch;
+      }
+    }
+
+    if (!bestChannel) return null;
+
+    const preview = getLastMessagePreview(bestChannel, currentUserId, options);
+    if (!preview.text && !preview.user) return null;
+
+    // sourceName is non-null only when the message comes from a sub-topic (not the parent/general)
+    const isFromSubTopic = bestChannel !== channel;
+    const sourceName = isFromSubTopic ? (bestChannel.data?.name as string || null) : null;
+
+    return {
+      text: preview.text,
+      user: preview.user,
+      timestamp: preview.timestamp,
+      sourceName,
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    channel,
+    channel.state?.topics,
+    currentUserId,
+    updateCount,
+    options?.deletedMessageLabel,
+    options?.stickerMessageLabel,
+    options?.photoMessageLabel,
+    options?.videoMessageLabel,
+    options?.voiceRecordingMessageLabel,
+    options?.fileMessageLabel,
+    options?.systemMessageTranslations,
+    options?.signalMessageTranslations,
+  ]);
+
+  return { topics, aggregatedUnreadCount, hasUnread, updateCount, latestMessagePreview };
+}
+

package/src/index.ts

@@ -7,6 +7,11 @@ export type { ChatProviderProps, ChatContextValue, Theme } from './context/ChatP
 
 // Hooks
 export { useChatClient } from './hooks/useChatClient';
+export { useChatUser } from './hooks/useChatUser';
+export { useInviteChannels } from './hooks/useInviteChannels';
+export { useContactChannels } from './hooks/useContactChannels';
+export { useInviteCount } from './hooks/useInviteCount';
+export { useContactCount } from './hooks/useContactCount';
 export { useChannel } from './hooks/useChannel';
 export type { UseChannelReturn } from './hooks/useChannel';
 export { useChannelListUpdates } from './hooks/useChannelListUpdates';
@@ -17,14 +22,29 @@ export { useOnlineStatus } from './hooks/useOnlineStatus';
 export type { OnlineStatus } from './hooks/useOnlineStatus';
 export { useOnlineUsers } from './hooks/useOnlineUsers';
 export { usePendingState } from './hooks/usePendingState';
+export { usePreviewState } from './hooks/usePreviewState';
+export { useTopicGroupUpdates } from './hooks/useTopicGroupUpdates';
+export { useDragAndDrop } from './hooks/useDragAndDrop';
+export { useMessageSend } from './hooks/useMessageSend';
+export { useFileUpload } from './hooks/useFileUpload';
+export { useEmojiPicker } from './hooks/useEmojiPicker';
+export { useStickerPicker } from './hooks/useStickerPicker';
+export type { UseStickerPickerOptions } from './hooks/useStickerPicker';
+export { useChannelCapabilities } from './hooks/useChannelCapabilities';
+export { useChannelMembers, useChannelProfile } from './hooks/useChannelData';
 
 // Components
 export { Avatar } from './components/Avatar';
 export type { AvatarProps } from './components/Avatar';
 
-export { ChannelList, ChannelItem, ChannelTopicGroup } from './components/ChannelList';
+export { ChannelList, ChannelItem, ChannelRow, DefaultPinnedIcon } from './components/ChannelList';
 export type { ChannelListProps, ChannelItemProps } from './components/ChannelList';
 
+export { FlatTopicGroupItem } from './components/FlatTopicGroupItem';
+export type { TopicPillProps, TopicListProps } from './types';
+
+export { TopicList } from './components/TopicList';
+
 export { DefaultChannelActions, computeDefaultActions } from './components/ChannelActions';
 export type { ChannelAction, ChannelActionsProps } from './types';
 
@@ -54,7 +74,7 @@ export { MessageActionsBox } from './components/MessageActionsBox';
 export type { MessageActionsBoxProps } from './types';
 
 export { Dropdown, closeAllDropdowns } from './components/Dropdown';
-export type { DropdownProps } from './components/Dropdown';
+export type { DropdownProps } from './types';
 
 export { MessageReactions } from './components/MessageReactions';
 export type { MessageReactionsProps, ReactionUser, LatestReaction } from './types';
@@ -63,7 +83,19 @@ export { MessageQuickReactions } from './components/MessageQuickReactions';
 
 export { useMessageActions } from './hooks/useMessageActions';
 
-export { formatTime, getDateKey, formatDateLabel, getMessageUserId, replaceMentionsForPreview } from './utils';
+export {
+  formatTime,
+  getDateKey,
+  formatDateLabel,
+  getMessageUserId,
+  replaceMentionsForPreview,
+  getLastMessagePreview,
+  buildUserMap,
+  removeAccents,
+  formatRelativeDate,
+  countWords,
+} from './utils';
+export { getAvatarGradient } from './utils/avatarColors';
 export {
   isGroupChannel,
   isDirectChannel,
@@ -100,8 +132,10 @@ export {
   isLinkPreviewAttachment,
   isImage,
   isVideo,
+  MESSAGE_DISPLAY_TYPES,
+  isDeletedDisplayMessage,
 } from './messageTypeUtils';
-export type { MessageType, AttachmentType } from './messageTypeUtils';
+export type { MessageType, AttachmentType, MessageDisplayType } from './messageTypeUtils';
 
 export {
   defaultMessageRenderers,
@@ -134,7 +168,10 @@ export type { FilePreviewItem, FilesPreviewProps } from './components/FilesPrevi
 export { MentionSuggestions } from './components/MentionSuggestions';
 export type { MentionSuggestionsProps } from './components/MentionSuggestions';
 
-export { useMentions } from './hooks/useMentions';
+export { EditPreview } from './components/EditPreview';
+export { PreviewOverlay } from './components/PreviewOverlay';
+
+export { useMentions, getMentionHtml } from './hooks/useMentions';
 export type { MentionMember, MentionPayload, UseMentionsOptions, UseMentionsReturn } from './hooks/useMentions';
 
 export { useScrollToMessage } from './hooks/useScrollToMessage';
@@ -143,9 +180,11 @@ export type { UseScrollToMessageOptions, UseScrollToMessageReturn } from './hook
 export { useLoadMessages, dedupMessages } from './hooks/useLoadMessages';
 export type { UseLoadMessagesOptions, UseLoadMessagesReturn } from './hooks/useLoadMessages';
 
-export { useChannelMessages } from './hooks/useChannelMessages';
+export { useChannelMessages, markChannelAsFullyQueried } from './hooks/useChannelMessages';
 export type { UseChannelMessagesOptions } from './hooks/useChannelMessages';
 
+export { useForwardMessage } from './hooks/useForwardMessage';
+
 export { QuotedMessagePreview } from './components/QuotedMessagePreview';
 export type { QuotedMessagePreviewProps } from './components/QuotedMessagePreview';
 export { ReplyPreview } from './components/ReplyPreview';
@@ -167,6 +206,11 @@ export {
   DefaultChannelInfoCover,
   DefaultChannelInfoActions,
   DefaultChannelInfoTabs,
+  MessageSearchPanel,
+  HighlightedText,
+  useMessageSearch,
+  ChannelSettingsPanel,
+  useChannelSettings,
 } from './components/ChannelInfo';
 
 export { Modal } from './components/Modal';
@@ -177,6 +221,7 @@ export type {
   ChannelInfoCoverProps,
   ChannelInfoActionsProps,
   ChannelInfoTabsProps,
+  ChannelInfoTabHeaderProps,
   ChannelInfoMemberItemProps,
   ChannelInfoMediaItemProps,
   ChannelInfoLinkItemProps,
@@ -188,6 +233,11 @@ export type {
   AddMemberModalProps,
   AddMemberUserItemProps,
   AddMemberButtonProps,
+  EditChannelModalProps,
+  EditChannelData,
+  TopicModalProps,
+  MessageSearchPanelProps,
+  ChannelSettingsPanelProps,
 } from './types';
 
 export { UserPicker } from './components/UserPicker';

package/src/messageTypeUtils.ts

@@ -24,7 +24,7 @@ export function isSystemMessage(message: any): boolean {
 }
 
 export function isStickerMessage(message: any): boolean {
-  return message?.type === MESSAGE_TYPES.STICKER;
+  return message?.type === MESSAGE_TYPES.STICKER || Boolean(message?.sticker_url);
 }
 
 export function isRegularMessage(message: any): boolean {
@@ -62,3 +62,15 @@ export function isImage(attachment: any): boolean {
 export function isVideo(attachment: any): boolean {
   return !!(isVideoAttachment(attachment) || (!attachment.type && attachment.mime_type?.startsWith('video/')));
 }
+
+export const MESSAGE_DISPLAY_TYPES = {
+  NORMAL: 'normal',
+  DELETED: 'deleted',
+} as const;
+
+export type MessageDisplayType = (typeof MESSAGE_DISPLAY_TYPES)[keyof typeof MESSAGE_DISPLAY_TYPES] | string;
+
+/** Check if a message was deleted for current user (display_type === 'deleted') */
+export function isDeletedDisplayMessage(message: any): boolean {
+  return message?.display_type === MESSAGE_DISPLAY_TYPES.DELETED;
+}

package/src/styles/_base.css

@@ -23,7 +23,6 @@
 }
 
 .ermis-avatar--fallback {
-  background: linear-gradient(135deg, var(--ermis-accent) 0%, var(--ermis-accent-hover) 100%);
   color: #fff;
   font-weight: 600;
   font-family: var(--ermis-font-family);

package/src/styles/_call-ui.css

@@ -187,6 +187,12 @@
   transform: scale(0.95);
 }
 
+.ermis-call-ui__action-circle:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
 .ermis-call-ui__action-circle--reject {
   background-color: var(--ermis-color-danger);
   box-shadow: 0 4px 20px rgba(239, 68, 68, 0.35);
@@ -242,7 +248,7 @@
 .ermis-call-ui__video-remote {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .ermis-call-ui__video-local {
@@ -268,7 +274,7 @@
 .ermis-call-ui__video-local-stream {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   transform: scaleX(-1);
 }
 
@@ -325,6 +331,39 @@
   background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
 }
 
+/* Video call status bar: mic-muted icon + duration timer in one row */
+.ermis-call-ui__video-timer {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 15;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: var(--ermis-radius-full);
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.85);
+  font-size: var(--ermis-font-size-sm);
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  user-select: none;
+}
+
+.ermis-call-ui__video-timer-mic {
+  display: flex;
+  align-items: center;
+  color: #f87171; /* red-400 */
+}
+
+.ermis-call-ui__video-timer-mic svg {
+  width: 16px;
+  height: 16px;
+}
+
 /* -- Audio Layout -- */
 .ermis-call-ui__audio-container {
   text-align: center;
@@ -741,3 +780,21 @@
     transform: none;
   }
 }
+
+/* ============================================================
+   SPINNER
+   ============================================================ */
+.ermis-call-ui__spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: #ffffff;
+  animation: ermis-call-spin 0.8s linear infinite;
+}
+
+@keyframes ermis-call-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/styles/_channel-info.css

@@ -6,9 +6,17 @@
   height: 100%;
   background: var(--ermis-bg-primary);
   border-left: 1px solid var(--ermis-border-base);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.ermis-channel-info__body {
+  flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
 .ermis-channel-info__header {
@@ -323,7 +331,6 @@
    ============================================ */
 
 .ermis-channel-info__media-section {
-  flex: 1;
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -336,6 +343,10 @@
   padding: 0 4px;
   gap: 0;
   flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--ermis-bg-primary);
 }
 
 .ermis-channel-info__media-tab {
@@ -393,8 +404,6 @@
    ============================================ */
 
 .ermis-channel-info__media-content {
-  flex: 1;
-  overflow: hidden;
   min-height: 120px;
 }
 
@@ -960,3 +969,31 @@
   font-weight: 500;
   color: var(--ermis-text-secondary);
 }
+
+.ermis-channel-info__preview-actions {
+  display: flex;
+  justify-content: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--ermis-border);
+}
+
+.ermis-channel-info__join-btn {
+  width: 100%;
+  justify-content: center;
+  font-weight: 600;
+  padding: 10px 16px;
+  border-radius: var(--ermis-radius-lg);
+  background-color: var(--ermis-accent);
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s ease, transform 0.1s ease;
+}
+
+.ermis-channel-info__join-btn:hover {
+  opacity: 0.9;
+}
+
+.ermis-channel-info__join-btn:active {
+  transform: scale(0.98);
+}