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

package/src/types.ts

@@ -6,6 +6,8 @@ import type {
   ChannelFilters,
   ChannelSort,
   ChannelQueryOptions,
+  E2eeRecoveryPolicy,
+  E2eeAttachmentManifest,
   UserCallInfo,
   SystemMessageTranslations,
   SignalMessageTranslations,
@@ -56,6 +58,12 @@ export type ChatContextValue = {
   setJumpToMessageId: (id: string | null) => void;
   /** Indicates whether the direct call feature is enabled */
   enableCall?: boolean;
+  /** Save a draft message (innerHTML and files) for a specific channel */
+  setDraft: (cid: string, draft: { html: string; files: any[] }) => void;
+  /** Retrieve the saved draft for a specific channel */
+  getDraft: (cid: string) => { html: string; files: any[] } | undefined;
+  /** Clear all saved drafts (e.g. on logout) */
+  clearAllDrafts: () => void;
 };
 
 import type { ChatComponentsContextValue } from './context/ChatComponentsContext';
@@ -474,6 +482,8 @@ export type TopicListProps = {
   videoMessageLabel?: React.ReactNode;
   voiceRecordingMessageLabel?: React.ReactNode;
   fileMessageLabel?: React.ReactNode;
+  encryptedMessageLabel?: React.ReactNode;
+  encryptedMessageUnavailableLabel?: React.ReactNode;
   systemMessageTranslations?: SystemMessageTranslations;
   signalMessageTranslations?: SignalMessageTranslations;
 };
@@ -522,6 +532,10 @@ export type ChannelListProps = {
   voiceRecordingMessageLabel?: React.ReactNode;
   /** Label for file messages in the preview strip (default: '📎 File') */
   fileMessageLabel?: React.ReactNode;
+  /** Label for encrypted messages in the preview strip (default: 'Encrypted message') */
+  encryptedMessageLabel?: React.ReactNode;
+  /** Label for encrypted messages that failed in the preview strip (default: 'Encrypted message unavailable') */
+  encryptedMessageUnavailableLabel?: React.ReactNode;
   /** Custom translation templates for system messages in the preview strip */
   systemMessageTranslations?: SystemMessageTranslations;
   /** Custom translation templates for signal (call) messages in the preview strip */
@@ -562,6 +576,8 @@ export type ChannelListProps = {
   FlatTopicGroupItemComponent?: React.ComponentType<any>;
   /** Auto-scroll the channel list to the top when the current user sends a message (default: true) */
   scrollToTopOnOwnMessage?: boolean;
+  /** Whether to show topic pills on team channels (default: false) */
+  showTopicPills?: boolean;
 };
 
 /* ----------------------------------------------------------
@@ -579,6 +595,12 @@ export type MessageRendererProps = {
   systemMessageTranslations?: SystemMessageTranslations;
   signalMessageTranslations?: SignalMessageTranslations;
   onMentionClick?: (userId: string) => void;
+  /** I18n Label for encrypted messages (default: 'Encrypted message') */
+  encryptedMessageLabel?: string;
+  /** I18n Label for encrypted messages that failed to decrypt (default: 'Encrypted message could not be decrypted') */
+  encryptedMessageFailedLabel?: string;
+  /** I18n Label for encrypted messages being decrypted (default: 'Decrypting encrypted message...') */
+  encryptedMessageDecryptingLabel?: string;
 };
 
 export type MessageBubbleProps = {
@@ -600,9 +622,14 @@ export type JumpToLatestProps = {
    ---------------------------------------------------------- */
 export type MediaLightboxItem = {
   type: 'image' | 'video';
-  src: string;
+  src?: string;
   alt?: string;
   posterSrc?: string;
+  loading?: boolean;
+  progressLabel?: string;
+  download?: () => Promise<void> | void;
+  onPlaybackError?: (context?: { currentTime?: number }) => Promise<void> | void;
+  onDispose?: () => Promise<void> | void;
 };
 
 export type MediaLightboxProps = {
@@ -713,6 +740,18 @@ export type MessageListProps = {
   typingIndicatorLabel?: (users: Array<{ id: string; name?: string }>) => string;
   /** I18n Label for deleted display messages (display_type === 'deleted') */
   deletedMessageLabel?: string;
+  /** I18n Label for attachment-only previews */
+  attachmentLabel?: string;
+  /** I18n Label for messages whose contents are unavailable */
+  unavailableMessageLabel?: string;
+  /** I18n Label for encrypted messages (default: 'Encrypted message') */
+  encryptedMessageLabel?: string;
+  /** I18n Label for encrypted messages that failed to decrypt (default: 'Encrypted message could not be decrypted') */
+  encryptedMessageFailedLabel?: string;
+  /** I18n Label for encrypted messages being decrypted (default: 'Decrypting encrypted message...') */
+  encryptedMessageDecryptingLabel?: string;
+  /** I18n Label for encrypted messages unavailable in sidebar preview (default: 'Encrypted message unavailable') */
+  encryptedMessageUnavailableLabel?: string;
   /** Custom translation templates for system messages */
   systemMessageTranslations?: SystemMessageTranslations;
   /** Custom translation templates for signal (call) messages */
@@ -815,6 +854,18 @@ export type MessageItemProps = {
   editedLabel?: string;
   /** I18n Label for deleted display messages (display_type === 'deleted') */
   deletedMessageLabel?: React.ReactNode;
+  /** I18n Label for attachment-only previews */
+  attachmentLabel?: string;
+  /** I18n Label for messages whose contents are unavailable */
+  unavailableMessageLabel?: string;
+  /** I18n Label for sticker message previews */
+  stickerLabel?: string;
+  /** I18n Label for encrypted messages (default: 'Encrypted message') */
+  encryptedMessageLabel?: string;
+  /** I18n Label for encrypted messages that failed to decrypt (default: 'Encrypted message could not be decrypted') */
+  encryptedMessageFailedLabel?: string;
+  /** I18n Label for encrypted messages being decrypted (default: 'Decrypting encrypted message...') */
+  encryptedMessageDecryptingLabel?: string;
   /** Custom translation templates for system messages */
   systemMessageTranslations?: SystemMessageTranslations;
   /** Custom translation templates for signal (call) messages */
@@ -825,6 +876,8 @@ export type MessageItemProps = {
   onUserNameClick?: (userId: string) => void;
   /** Handler when clicking to add a custom reaction */
   onAddReactionClick?: (e: React.MouseEvent, messageId: string) => void;
+  /** When true, the avatar column is not rendered (handled by group wrapper) */
+  hideAvatar?: boolean;
 };
 
 export type SystemMessageItemProps = {
@@ -1007,6 +1060,8 @@ export type PinnedMessageItemProps = {
   AvatarComponent: React.ComponentType<AvatarProps>;
   unpinLabel?: string;
   stickerLabel?: string;
+  attachmentLabel?: string;
+  unavailableMessageLabel?: string;
 };
 
 export type PinnedMessagesProps = {
@@ -1026,6 +1081,8 @@ export type PinnedMessagesProps = {
   collapseLabel?: string;
   unpinLabel?: string;
   stickerLabel?: string;
+  attachmentLabel?: string;
+  unavailableMessageLabel?: string;
 };
 
 /* ----------------------------------------------------------
@@ -1037,11 +1094,28 @@ export type QuotedMessagePreviewProps = {
     id: string;
     text?: string;
     user?: { id?: string; name?: string };
+    attachments?: Attachment[];
+    content_type?: string;
+    mls_ciphertext?: unknown;
+    e2ee_status?: string;
+    sticker_url?: string;
+    type?: string;
+    display_type?: string;
+    mentioned_users?: string[];
+    mentioned_all?: boolean;
   };
   /** Whether the parent message is from the current user */
   isOwnMessage: boolean;
   /** Callback when the quote box is clicked */
   onClick: (messageId: string) => void;
+  /** I18n Label for attachment-only quoted messages */
+  attachmentLabel?: string;
+  /** I18n Label for quoted messages whose contents are unavailable */
+  unavailableMessageLabel?: string;
+  /** I18n Label for sticker quoted messages */
+  stickerLabel?: string;
+  /** I18n Label for deleted messages */
+  deletedMessageLabel?: string;
 };
 
 /* ----------------------------------------------------------
@@ -1111,6 +1185,10 @@ export type FilePreviewItem = {
   previewUrl?: string;
   /** Upload status */
   status: 'pending' | 'uploading' | 'done' | 'error';
+  /** E2EE upload phase when the file is handled by MLS attachment flow */
+  e2eePhase?: 'generating_preview' | 'encrypting' | 'uploading' | 'completing' | 'sending' | 'retrying' | 'failed';
+  /** Upload progress percentage (0-100) */
+  progress?: number;
   /** Error message if upload failed */
   error?: string;
   /** URL returned after successful upload */
@@ -1200,6 +1278,8 @@ export type AttachmentItem = {
   og_scrape_url?: string;
   image_url?: string;
   text?: string;
+  e2ee_manifest?: E2eeAttachmentManifest;
+  e2ee_manifest_missing?: boolean;
 };
 
 export type MediaTab = 'members' | 'media' | 'links' | 'files';
@@ -1272,9 +1352,14 @@ export type ChannelInfoCoverProps = {
   isTopic?: boolean;
   /** Whether the channel is a team channel */
   isTeamChannel?: boolean;
+  /** Whether this channel or inherited parent topic is E2EE enabled */
+  isE2ee?: boolean;
+  /** Current encryption epoch, if available */
+  encryptionEpoch?: number;
 };
 
 export type ChannelInfoActionsProps = {
+  channel?: Channel;
   onSearchClick?: () => void;
   onSettingsClick?: () => void;
   onLeaveChannel?: () => void;
@@ -1308,6 +1393,15 @@ export type ChannelInfoActionsProps = {
   onCreateTopic?: () => void;
   createTopicLabel?: string;
   topicsEnabled?: boolean;
+  isE2ee?: boolean;
+  encryptionInitialized?: boolean;
+  encryptionEpoch?: number;
+  onRotateKey?: () => void;
+  rotateKeyLabel?: string;
+  rotateKeyDisabled?: boolean;
+  onEnableE2ee?: () => void;
+  enableE2eeLabel?: string;
+  enableE2eeDisabled?: boolean;
 };
 
 export type ChannelInfoMember = {
@@ -1710,6 +1804,7 @@ export type CreateChannelFooterProps = {
   messageButtonLabel?: string;
   nextButtonLabel?: string;
   backButtonLabel?: string;
+  e2eeEnabled?: boolean;
 };
 
 export type CreateChannelGroupFieldsProps = {
@@ -1725,12 +1820,27 @@ export type CreateChannelGroupFieldsProps = {
   groupDescriptionLabel?: string;
   groupDescriptionPlaceholder?: string;
   groupPublicLabel?: string;
+  e2eeEnabled?: boolean;
+  onE2eeChange?: (enabled: boolean) => void;
+  e2eeLabel?: string;
+  e2eeDescription?: string;
+  e2eeDisabled?: boolean;
+};
+
+export type CreateChannelE2eeToggleProps = {
+  enabled: boolean;
+  onChange: (enabled: boolean) => void;
+  disabled?: boolean;
+  label?: string;
+  description?: string;
 };
 
 export type CreateChannelModalProps = {
   isOpen: boolean;
   onClose: () => void;
   onSuccess?: (channel: any) => void; // Uses 'any' or 'Channel' based on context
+  /** Recovery coverage policy for newly created E2EE channels. Defaults to member_assisted. */
+  e2eeRecoveryPolicy?: E2eeRecoveryPolicy;
 
   /** Override visual components */
   AvatarComponent?: React.ComponentType<AvatarProps>;
@@ -1744,6 +1854,7 @@ export type CreateChannelModalProps = {
     placeholder: string;
   }>;
   SelectedBoxComponent?: React.ComponentType<UserPickerSelectedBoxProps>;
+  E2eeToggleComponent?: React.ComponentType<CreateChannelE2eeToggleProps>;
 
   /** i18n labels */
   title?: string;
@@ -1763,6 +1874,9 @@ export type CreateChannelModalProps = {
   nextButtonLabel?: string;
   backButtonLabel?: string;
   emptyStateLabel?: string;
+  e2eeLabel?: string;
+  e2eeDescription?: string;
+  e2eeUnavailableLabel?: string;
 
   /** File upload configuration for group channel images */
   imageAccept?: string;

package/src/utils/avatarColors.ts

@@ -22,7 +22,7 @@ const AVATAR_GRADIENTS: readonly [string, string][] = [
 ] as const;
 
 /** Neutral fallback when no name is available. */
-const FALLBACK_GRADIENT = 'linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%)';
+const FALLBACK_GRADIENT = 'linear-gradient(135deg, #6B7280 0%, #545f71 100%)';
 
 /**
  * Simple djb2-variant string hash → non-negative integer.

package/src/utils.ts

@@ -22,12 +22,15 @@ export function removeAccents(str: string): string {
 }
 
 /**
- * Format a Date or date-string to a short time string (HH:MM).
+ * Format a Date or date-string to a short time string (HH:MM, 24-hour).
+ * Matches Telegram's compact time display.
  */
 export function formatTime(date: Date | string | undefined): string {
   if (!date) return '';
   const d = date instanceof Date ? date : new Date(date);
-  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const hours = String(d.getHours()).padStart(2, '0');
+  const minutes = String(d.getMinutes()).padStart(2, '0');
+  return `${hours}:${minutes}`;
 }
 
 /**
@@ -113,11 +116,11 @@ export function getMessageUserId(message: FormatMessageResponse): string {
  */
 export function replaceMentionsForPreview(
   text: string,
-  message: FormatMessageResponse | { mentioned_users?: string[]; mentioned_all?: boolean },
+  message: FormatMessageResponse | { mentioned_users?: any[]; mentioned_all?: boolean },
   userMap: Record<string, string>,
   renderWrapper?: (userId: string, name: string) => string,
 ): string {
-  const mentionedUsers: string[] = (message as any).mentioned_users ?? [];
+  const mentionedUsers: any[] = (message as any).mentioned_users ?? [];
   const mentionedAll: boolean = (message as any).mentioned_all ?? false;
 
   // If no mentions, nothing to replace
@@ -127,9 +130,12 @@ export function replaceMentionsForPreview(
 
   const replacements: { pattern: string; label: string }[] = [];
 
-  for (const userId of mentionedUsers) {
+  for (const userItem of mentionedUsers) {
+    if (!userItem) continue;
+    const userId = typeof userItem === 'string' ? userItem : userItem.id;
     if (!userId) continue;
-    const name = userMap[userId] ?? userId;
+    const itemObjName = typeof userItem === 'object' ? userItem.name : undefined;
+    const name = userMap[userId] ?? itemObjName ?? userId;
     replacements.push({
       pattern: `@${userId}`,
       label: renderWrapper ? renderWrapper(userId, name) : `@${name}`,
@@ -161,13 +167,17 @@ export function replaceMentionsForPreview(
  */
 export function buildUserMap(channelState: any, extraUsers?: Record<string, any>): Record<string, string> {
   const map: Record<string, string> = {};
+  const setDisplayName = (id: string, name?: string) => {
+    if (!id || !name) return;
+    const current = map[id];
+    if (current && current !== id) return;
+    map[id] = name;
+  };
 
   // 1. Fallback: Global user cache from client state
   if (extraUsers && typeof extraUsers === 'object') {
     for (const [id, user] of Object.entries<any>(extraUsers)) {
-      if (user?.name) {
-        map[id] = user.name;
-      }
+      setDisplayName(id, user?.name);
     }
   }
 
@@ -176,7 +186,7 @@ export function buildUserMap(channelState: any, extraUsers?: Record<string, any>
   if (members && typeof members === 'object') {
     for (const [id, member] of Object.entries<any>(members)) {
       const name = member?.user?.name || member?.user_id || id;
-      if (name) map[id] = name;
+      setDisplayName(id, name);
     }
   }
 
@@ -185,9 +195,7 @@ export function buildUserMap(channelState: any, extraUsers?: Record<string, any>
   if (Array.isArray(messages)) {
     messages.forEach((msg: any) => {
       const u = msg.user;
-      if (u?.id && !map[u.id] && u.name) {
-        map[u.id] = u.name;
-      }
+      setDisplayName(u?.id, u?.name);
     });
   }
 
@@ -195,9 +203,7 @@ export function buildUserMap(channelState: any, extraUsers?: Record<string, any>
   const watchers = channelState?.watchers;
   if (watchers && typeof watchers === 'object') {
     for (const [id, user] of Object.entries<any>(watchers)) {
-      if (!map[id] && user?.name) {
-        map[id] = user.name;
-      }
+      setDisplayName(id, user?.name);
     }
   }
 
@@ -332,6 +338,8 @@ export function getLastMessagePreview(
     videoMessageLabel?: React.ReactNode;
     voiceRecordingMessageLabel?: React.ReactNode;
     fileMessageLabel?: React.ReactNode;
+    encryptedMessageLabel?: React.ReactNode;
+    encryptedMessageUnavailableLabel?: React.ReactNode;
     systemMessageTranslations?: SystemMessageTranslations;
     signalMessageTranslations?: SignalMessageTranslations;
   },
@@ -344,6 +352,7 @@ export function getLastMessagePreview(
   const msgType = lastMsg.type || 'regular';
   const isDeleted = isDeletedDisplayMessage(lastMsg);
   const rawText = lastMsg.text ?? '';
+  const isEncrypted = lastMsg.content_type === 'mls' || Boolean((lastMsg as any).mls_ciphertext);
 
   const client = (channel as any).getClient?.() || (channel as any).client;
   const userMap = buildUserMap(channel.state, client?.state?.users);
@@ -362,7 +371,8 @@ export function getLastMessagePreview(
   }
 
   const userId = lastMsg.user_id || '';
-  const senderName = (userId && userMap[userId]) || lastMsg.user?.name || userId || '';
+  const currentUser = userId && userId === myUserId ? client?.user : undefined;
+  const senderName = currentUser?.name || lastMsg.user?.name || (userId && userMap[userId]) || userId || '';
 
   // Display 'Sticker' if message is a sticker
   const isSticker = msgType === 'sticker' || (lastMsg as any).sticker_url;
@@ -398,13 +408,23 @@ export function getLastMessagePreview(
       }
     }
   }
+  if (!displayText && isEncrypted) {
+    displayText =
+      (lastMsg as any).e2ee_status === 'failed'
+        ? options?.encryptedMessageUnavailableLabel || 'Encrypted message unavailable'
+        : options?.encryptedMessageLabel || 'Encrypted message';
+  }
 
   // Format mentions if necessary
   const lastMsgRecord = lastMsg as any;
   const mentionedUsers = lastMsgRecord.mentioned_users as string[] | undefined;
   const mentionedAll = lastMsgRecord.mentioned_all as boolean | undefined;
 
-  if (typeof displayText === 'string' && displayText && (mentionedAll || (mentionedUsers && mentionedUsers.length > 0))) {
+  if (
+    typeof displayText === 'string' &&
+    displayText &&
+    (mentionedAll || (mentionedUsers && mentionedUsers.length > 0))
+  ) {
     displayText = replaceMentionsForPreview(displayText, lastMsg as any, userMap);
   }