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

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%, #9CA3AF 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,5 +1,25 @@
+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';
+
+/**
+ * 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).
@@ -42,8 +62,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 +74,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',
@@ -76,7 +115,7 @@ export function replaceMentionsForPreview(
   text: string,
   message: FormatMessageResponse | { mentioned_users?: string[]; 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 mentionedAll: boolean = (message as any).mentioned_all ?? false;
@@ -100,7 +139,7 @@ export function replaceMentionsForPreview(
   if (mentionedAll) {
     replacements.push({
       pattern: '@all',
-      label: renderWrapper ? renderWrapper('__all__', 'all') : '@all'
+      label: renderWrapper ? renderWrapper('__all__', 'all') : '@all',
     });
   }
 
@@ -120,14 +159,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> = {};
+
+  // 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;
+      }
+    }
+  }
+
+  // 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;
+      if (name) map[id] = name;
+    }
+  }
+
+  // 3. Fallback: scan latest messages
+  const messages = channelState?.latestMessages;
+  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;
+      }
+    });
+  }
+
+  // 4. Fallback: check watchers
+  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;
+      }
     }
   }
+
   return map;
 }
 
@@ -214,7 +287,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 +317,109 @@ 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;
+    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 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 senderName = (userId && userMap[userId]) || lastMsg.user?.name || 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);
+      }
+    }
+  }
+
+  // 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;
+}