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

package/src/utils/avatarColors.ts

@@ -0,0 +1,48 @@
+/**
+ * Hash-based avatar color palette.
+ *
+ * Each user/channel is assigned a deterministic gradient based on
+ * the hash of their name. This provides visual variety in the
+ * channel list and improves readability over a single brand-color
+ * fallback.
+ */
+
+/** Curated gradient pairs [from, to] – all pass WCAG AA contrast with white text. */
+const AVATAR_GRADIENTS: readonly [string, string][] = [
+  ['#0EA5E9', '#38BDF8'], // Teal
+  ['#10B981', '#34D399'], // Emerald
+  ['#D97706', '#F59E0B'], // Amber
+  ['#E11D48', '#FB7185'], // Rose
+  ['#7C3AED', '#A78BFA'], // Violet
+  ['#4F46E5', '#818CF8'], // Indigo
+  ['#DB2777', '#F472B6'], // Pink
+  ['#EA580C', '#FB923C'], // Orange
+  ['#0891B2', '#22D3EE'], // Cyan
+  ['#65A30D', '#A3E635'], // Lime
+] as const;
+
+/** Neutral fallback when no name is available. */
+const FALLBACK_GRADIENT = 'linear-gradient(135deg, #6B7280 0%, #545f71 100%)';
+
+/**
+ * Simple djb2-variant string hash → non-negative integer.
+ */
+function hashString(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) - hash) + str.charCodeAt(i);
+    hash |= 0; // Convert to 32-bit integer
+  }
+  return Math.abs(hash);
+}
+
+/**
+ * Returns a CSS `linear-gradient(...)` string for a given name.
+ * The same name always produces the same gradient (deterministic).
+ */
+export function getAvatarGradient(name?: string): string {
+  if (!name) return FALLBACK_GRADIENT;
+  const idx = hashString(name) % AVATAR_GRADIENTS.length;
+  const [from, to] = AVATAR_GRADIENTS[idx];
+  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
+}

package/src/utils.ts

@@ -1,13 +1,36 @@
+import React from 'react';
 import type { MentionMember } from './types';
-import type { Attachment, FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
+import type { Attachment, FormatMessageResponse, Channel } from '@ermis-network/ermis-chat-sdk';
+import {
+  parseSystemMessage,
+  parseSignalMessage,
+  SystemMessageTranslations,
+  SignalMessageTranslations,
+} from '@ermis-network/ermis-chat-sdk';
+import { isDeletedDisplayMessage } from './messageTypeUtils';
 
 /**
- * Format a Date or date-string to a short time string (HH:MM).
+ * Remove Vietnamese diacritics (accents) from a string.
+ */
+export function removeAccents(str: string): string {
+  if (!str) return '';
+  return str
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/đ/g, 'd')
+    .replace(/Đ/g, 'D');
+}
+
+/**
+ * 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}`;
 }
 
 /**
@@ -42,8 +65,10 @@ export function getDateKey(date: Date | string | undefined): string {
 
 /**
  * Format a date into a human-friendly label (Today / Yesterday / full date).
+ * When `locale` is provided, "Today" / "Yesterday" are localised via
+ * `Intl.RelativeTimeFormat` and the full date uses that locale for formatting.
  */
-export function formatDateLabel(date: Date | string | undefined): string {
+export function formatDateLabel(date: Date | string | undefined, locale?: string): string {
   if (!date) return '';
   const d = date instanceof Date ? date : new Date(date);
   const now = new Date();
@@ -52,9 +77,26 @@ export function formatDateLabel(date: Date | string | undefined): string {
   const diffMs = today.getTime() - msgDay.getTime();
   const diffDays = Math.round(diffMs / 86400000);
 
-  if (diffDays === 0) return 'Today';
-  if (diffDays === 1) return 'Yesterday';
-  return d.toLocaleDateString(undefined, {
+  if (diffDays === 0) {
+    if (locale && typeof Intl !== 'undefined' && Intl.RelativeTimeFormat) {
+      const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+      // Format -0 days → "today" / "hôm nay" etc.
+      const parts = rtf.formatToParts(0, 'day');
+      const label = parts.map((p) => p.value).join('');
+      return label.charAt(0).toUpperCase() + label.slice(1);
+    }
+    return 'Today';
+  }
+  if (diffDays === 1) {
+    if (locale && typeof Intl !== 'undefined' && Intl.RelativeTimeFormat) {
+      const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+      const parts = rtf.formatToParts(-1, 'day');
+      const label = parts.map((p) => p.value).join('');
+      return label.charAt(0).toUpperCase() + label.slice(1);
+    }
+    return 'Yesterday';
+  }
+  return d.toLocaleDateString(locale || undefined, {
     year: 'numeric',
     month: 'long',
     day: 'numeric',
@@ -74,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
+  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
@@ -88,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}`,
@@ -100,7 +145,7 @@ export function replaceMentionsForPreview(
   if (mentionedAll) {
     replacements.push({
       pattern: '@all',
-      label: renderWrapper ? renderWrapper('__all__', 'all') : '@all'
+      label: renderWrapper ? renderWrapper('__all__', 'all') : '@all',
     });
   }
 
@@ -120,14 +165,48 @@ export function replaceMentionsForPreview(
  * Common helper to build a dictionary of User ID -> Display Name
  * from the channel state, used for rendering Mentions and System logs.
  */
-export function buildUserMap(channelState: any): Record<string, string> {
+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)) {
+      setDisplayName(id, user?.name);
+    }
+  }
+
+  // 2. Current members
   const members = channelState?.members;
   if (members && typeof members === 'object') {
     for (const [id, member] of Object.entries<any>(members)) {
-      map[id] = member?.user?.name || member?.user_id || id;
+      const name = member?.user?.name || member?.user_id || id;
+      setDisplayName(id, name);
+    }
+  }
+
+  // 3. Fallback: scan latest messages
+  const messages = channelState?.latestMessages;
+  if (Array.isArray(messages)) {
+    messages.forEach((msg: any) => {
+      const u = msg.user;
+      setDisplayName(u?.id, u?.name);
+    });
+  }
+
+  // 4. Fallback: check watchers
+  const watchers = channelState?.watchers;
+  if (watchers && typeof watchers === 'object') {
+    for (const [id, user] of Object.entries<any>(watchers)) {
+      setDisplayName(id, user?.name);
     }
   }
+
   return map;
 }
 
@@ -214,7 +293,11 @@ export function formatRelativeDate(dateStr: string): string {
   if (diffDays === 1) return 'Yesterday';
   if (diffDays < 7) return `${diffDays}d ago`;
 
-  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined });
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
+  });
 }
 
 /**
@@ -240,3 +323,123 @@ export function extractDomain(url: string): string {
     return url;
   }
 }
+
+/**
+ * Get a human-readable preview string for the last message,
+ * handling regular, system, and signal message types.
+ */
+export function getLastMessagePreview(
+  channel: Channel,
+  myUserId?: string,
+  options?: {
+    deletedMessageLabel?: React.ReactNode;
+    stickerMessageLabel?: React.ReactNode;
+    photoMessageLabel?: React.ReactNode;
+    videoMessageLabel?: React.ReactNode;
+    voiceRecordingMessageLabel?: React.ReactNode;
+    fileMessageLabel?: React.ReactNode;
+    encryptedMessageLabel?: React.ReactNode;
+    encryptedMessageUnavailableLabel?: React.ReactNode;
+    systemMessageTranslations?: SystemMessageTranslations;
+    signalMessageTranslations?: SignalMessageTranslations;
+  },
+): { text: React.ReactNode; user: string; timestamp?: string | Date } {
+  const lastMsg = channel.state?.latestMessages?.slice(-1)[0];
+  if (!lastMsg) return { text: '', user: '' };
+
+  const timestamp = lastMsg.created_at;
+
+  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);
+
+  if (isDeleted) {
+    return { text: options?.deletedMessageLabel || 'This message was deleted', user: '', timestamp };
+  }
+
+  if (msgType === 'system') {
+    return { text: parseSystemMessage(rawText, userMap, options?.systemMessageTranslations), user: '', timestamp };
+  }
+
+  if (msgType === 'signal') {
+    const result = parseSignalMessage(rawText, myUserId || '', options?.signalMessageTranslations);
+    return { text: result?.text || rawText, user: '', timestamp };
+  }
+
+  const userId = lastMsg.user_id || '';
+  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;
+  if (isSticker) {
+    return { text: options?.stickerMessageLabel || 'Sticker', user: senderName, timestamp };
+  }
+
+  // Regular / other
+  let displayText: React.ReactNode = rawText;
+  if (!displayText && lastMsg.attachments && lastMsg.attachments.length > 0) {
+    const att = lastMsg.attachments[0];
+    const type = att.type || '';
+    switch (type) {
+      case 'image':
+        displayText = options?.photoMessageLabel || '📷 Photo';
+        break;
+      case 'video':
+        displayText = options?.videoMessageLabel || '🎬 Video';
+        break;
+      case 'voiceRecording':
+        displayText = options?.voiceRecordingMessageLabel || '🎤 Voice message';
+        break;
+      default:
+        displayText = options?.fileMessageLabel || '📎 File';
+        break;
+    }
+    if (lastMsg.attachments.length > 1) {
+      if (typeof displayText === 'string') {
+        displayText += ` +${lastMsg.attachments.length - 1}`;
+      } else {
+        const extraText = ` +${lastMsg.attachments.length - 1}`;
+        displayText = React.createElement(React.Fragment, null, displayText, extraText);
+      }
+    }
+  }
+  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))
+  ) {
+    displayText = replaceMentionsForPreview(displayText, lastMsg as any, userMap);
+  }
+
+  return {
+    text: displayText,
+    user: senderName,
+    timestamp,
+  };
+}
+
+/**
+ * Count the number of words in a string.
+ * A word is defined as a non-empty sequence of characters separated by whitespace.
+ */
+export function countWords(str: string): number {
+  if (!str) return 0;
+  return str.trim().split(/\s+/).filter(Boolean).length;
+}