@droppii-org/chat-mobile 0.2.79 → 0.2.81

package/src/types/chat.ts

@@ -341,3 +341,33 @@ export interface ISearchMessageItem {
   chatLog: MessageItem;
   conversation: ConversationItem;
 }
+
+export enum ContactCategory {
+  Customer = 'CUSTOMER',
+  Pdp = 'PDP_BOT',
+  Group = 'GROUP',
+  Seller = 'USER',
+}
+
+export type IContactSearchRequest = {
+  applicationType: DChatApplicationType;
+  searchTerm: string;
+  page: number;
+  pageSize: number;
+  type?: ContactCategory;
+};
+
+export interface IContactSearchItem {
+  id: string;
+  type: ContactCategory;
+  targetUserId?: string;
+  targetCustomerId?: string;
+  targetGroupId?: string;
+  targetBotId?: string;
+  targetName: string;
+  targetAvatar?: string;
+  applicationType: DChatApplicationType;
+  lastOnlineTime?: string;
+  memberCount?: number;
+  description?: string;
+}

package/src/utils/dateTimeUtils.ts

@@ -2,6 +2,12 @@
  * Date and time formatting utilities
  */
 
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/vi';
+
+dayjs.extend(relativeTime);
+
 export const formatDuration = (durationMs: number): string => {
   // Convert milliseconds to seconds
   const totalSeconds = Math.floor(durationMs / 1000);
@@ -46,3 +52,12 @@ export const formatTimestamp = (ts: number | string | null): string => {
     return '';
   }
 };
+
+export const formatLastOnlineTime = (ts: number | string | null): string => {
+  if (!ts) return '';
+
+  const date = dayjs(ts).locale('vi');
+  if (!date.isValid()) return '';
+
+  return date.fromNow();
+};

package/src/utils/highlightSearch.ts

@@ -4,6 +4,16 @@ export interface HighlightResult {
   after: string;
 }
 
+// Strips Vietnamese diacritics one base-character-at-a-time (NFD decomposition +
+// combining-mark removal, plus đ/Đ which NFD doesn't decompose) so the result stays
+// the same length and index-aligned with the input
+const stripDiacritics = (input: string): string =>
+  input
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/đ/g, 'd')
+    .replace(/Đ/g, 'D');
+
 export const highlightSearch = (
   text: string,
   keyword: string,
@@ -11,8 +21,8 @@ export const highlightSearch = (
 ): HighlightResult | null => {
   if (!keyword) return null;
 
-  const lowerText = text.toLowerCase();
-  const lowerKeyword = keyword.toLowerCase();
+  const lowerText = stripDiacritics(text.toLowerCase());
+  const lowerKeyword = stripDiacritics(keyword.toLowerCase());
   const index = lowerText.indexOf(lowerKeyword);
 
   if (index === -1) return null;

package/src/utils/legendListMessage.ts

@@ -1,4 +1,6 @@
 import { MessageType, type MessageItem } from '@droppii/openim-rn-client-sdk';
+import { GROUP_NOTIFICATION_TYPES } from './messageUtils';
+import { getMessageRenderId, getMessageTime } from './message';
 
 /**
  * Extract message text based on content type
@@ -39,41 +41,148 @@ export const getMessageText = (message: MessageItem): string => {
   }
 };
 
+/** Where a message sits inside its run of consecutive same-sender messages. */
+export type GroupPosition = 'first' | 'middle' | 'last' | 'solo';
+
 export interface PrecomputedMessageData {
   messageId: string;
   dayStart: boolean;
+  /**
+   * More than GROUP_TIME_GAP has passed since the previous message. The list
+   * marks these with a time label: the cluster break is real but, unlike a day
+   * change, nothing else on screen would show why the run stopped.
+   */
+  timeBreak: boolean;
   createdAt: number;
+  groupPosition: GroupPosition;
+}
+
+/** Two messages further apart than this never share a cluster. */
+const GROUP_TIME_GAP = 300_000; // 5 minutes
+
+/** Virtual sender for bot conversations — see getGroupKey. */
+const BOT_GROUP_KEY = '__bot__';
+
+const startOfDay = (timestamp: number): number => {
+  const date = new Date(timestamp);
+  date.setHours(0, 0, 0, 0);
+  return date.getTime();
+};
+
+/**
+ * System banners (group created/renamed/member changes) and anything without a
+ * sender are not user-authored, so they never join a cluster and always break
+ * the runs on both sides of them.
+ */
+const isSystemMessage = (message: MessageItem): boolean =>
+  GROUP_NOTIFICATION_TYPES.includes(message.contentType) || !message.sendID;
+
+/**
+ * Identity two messages must share to cluster together. In a bot conversation
+ * every incoming message is treated as one virtual sender: replies come from
+ * the bot and from human agents under different sendIDs, but read as a single
+ * continuous voice.
+ */
+const getGroupKey = (
+  message: MessageItem,
+  isBotConversation: boolean,
+  currentUserId?: string
+): string => {
+  const isOutgoing = message.sendID === currentUserId;
+  if (isBotConversation && !isOutgoing) return BOT_GROUP_KEY;
+  return message.sendID;
+};
+
+export interface PrecomputeOptions {
+  isBotConversation?: boolean;
+  currentUserId?: string;
 }
 
 /**
- * Precompute all message rendering data in single pass O(n)
- * Eliminates redundant Date creation and type resolution during render
+ * Precompute per-message render data (day dividers + cluster position) so
+ * renderItem stays allocation-free.
  *
- * Returns: Map of messageId -> {dayStart, messageType, createdAt}
+ * Runs in two passes: day starts first, because cluster boundaries depend on
+ * them — a divider between two messages separates them however close in time
+ * they are.
  */
 export const precomputeLegendListData = (
-  messages: MessageItem[]
+  messages: MessageItem[],
+  { isBotConversation = false, currentUserId }: PrecomputeOptions = {}
 ): Map<string, PrecomputedMessageData> => {
   const dataMap = new Map<string, PrecomputedMessageData>();
+
+  // Pass 1 — identity, timestamp, day divider.
+  const dayStarts: boolean[] = [];
+  const ids: string[] = [];
+  // Resolved timestamps, reused by pass 2. Shared with the list's sort key so
+  // cluster boundaries are computed over the same ordering that gets rendered.
+  const timestamps: number[] = [];
   let lastDay: number | null = null;
 
   messages.forEach((message, index) => {
-    // Get message ID - use timestamp as fallback for newly sent messages
-    const messageId =
-      message.clientMsgID ||
-      message.serverMsgID ||
-      `temp-${message.sendTime || message.createTime}-${index}`;
+    const messageId = getMessageRenderId(message, index);
+
+    // A message still in flight can reach us with no usable timestamp at all.
+    // Left as 0 it lands on the epoch, which reads as a different calendar day
+    // from its neighbours — that inserts a bogus divider AND splits the cluster,
+    // stranding a tail on the message before it. Anchor it to the previous
+    // message instead, which is where it belongs in both senses.
+    const rawCreatedAt = getMessageTime(message);
+    const createdAt =
+      rawCreatedAt > 0 ? rawCreatedAt : (timestamps[index - 1] ?? rawCreatedAt);
+    const day = startOfDay(createdAt);
 
-    const createdAt = message.sendTime || message.createTime;
-    const day = new Date(createdAt).getDate();
+    const prevTimestamp = timestamps[index - 1];
+
+    ids[index] = messageId;
+    timestamps[index] = createdAt;
+    dayStarts[index] = lastDay !== day;
+    lastDay = day;
 
     dataMap.set(messageId, {
       messageId,
-      dayStart: lastDay !== day,
+      dayStart: dayStarts[index]!,
+      timeBreak:
+        prevTimestamp !== undefined &&
+        createdAt - prevTimestamp > GROUP_TIME_GAP,
       createdAt,
+      groupPosition: 'solo',
     });
+  });
 
-    lastDay = day;
+  // Pass 2 — cluster position, now that every day divider is known.
+  messages.forEach((message, index) => {
+    const entry = dataMap.get(ids[index]!);
+    if (!entry) return;
+    if (isSystemMessage(message)) return; // stays 'solo'
+
+    const key = getGroupKey(message, isBotConversation, currentUserId);
+    const prev = messages[index - 1];
+    const next = messages[index + 1];
+
+    const joinsPrev =
+      !!prev &&
+      !isSystemMessage(prev) &&
+      getGroupKey(prev, isBotConversation, currentUserId) === key &&
+      timestamps[index]! - timestamps[index - 1]! <= GROUP_TIME_GAP &&
+      // A divider above THIS message separates it from the one before it.
+      !dayStarts[index];
+
+    const joinsNext =
+      !!next &&
+      !isSystemMessage(next) &&
+      getGroupKey(next, isBotConversation, currentUserId) === key &&
+      timestamps[index + 1]! - timestamps[index]! <= GROUP_TIME_GAP &&
+      !dayStarts[index + 1];
+
+    entry.groupPosition = joinsPrev
+      ? joinsNext
+        ? 'middle'
+        : 'last'
+      : joinsNext
+        ? 'first'
+        : 'solo';
   });
 
   return dataMap;
@@ -90,7 +199,7 @@ export const computeDayStarts = (
   let lastDay: number | null = null;
 
   messages.forEach((message) => {
-    const day = new Date(message.sendTime || message.createTime).getDate();
+    const day = startOfDay(getMessageTime(message));
     const messageId = message.clientMsgID || message.serverMsgID || '';
     dayStartMap.set(messageId, lastDay !== day);
     lastDay = day;

package/src/utils/message.ts

@@ -6,12 +6,30 @@ import {
 } from '@droppii/openim-rn-client-sdk';
 import { getConversationID } from './conversation';
 
-const getMessageTime = (message: MessageItem) =>
+/**
+ * Canonical timestamp for a message. `sendTime` is 0 until the SDK stamps an
+ * outgoing message, so `createTime` covers the in-flight window. This is the
+ * key the list is sorted by — anything reasoning about message order must use
+ * it too, or it will disagree with the order actually rendered.
+ */
+export const getMessageTime = (message: MessageItem) =>
   message.sendTime || message.createTime || 0;
 
 const getMessageKey = (message: MessageItem) =>
   message.clientMsgID || message.serverMsgID;
 
+/**
+ * Stable id for a message inside a rendered list.
+ *
+ * A message that has not round-tripped through the server yet may carry
+ * neither id, so position and timestamp stand in. Every consumer that looks a
+ * message up by id must derive it the same way — the precompute map is keyed
+ * on this, so a divergent formula silently misses and the message renders
+ * without its day divider or cluster position.
+ */
+export const getMessageRenderId = (message: MessageItem, index: number) =>
+  getMessageKey(message) || `temp-${getMessageTime(message)}-${index}`;
+
 export const mergeMessages = (
   current: MessageItem[],
   incoming: MessageItem[]

package/src/utils/messageUtils.ts

@@ -92,6 +92,14 @@ export const GROUP_NOTIFICATION_TEXT: Partial<
   },
 };
 
+// The content types above, as a plain list. Both the chat list (to decide
+// whether a message renders as a system banner) and the grouping precompute
+// (system messages never join a sender cluster) need this, so it is derived
+// once here rather than in each consumer.
+export const GROUP_NOTIFICATION_TYPES = Object.keys(
+  GROUP_NOTIFICATION_TEXT
+).map(Number) as MessageType[];
+
 const parseNotificationDetail = (message: MessageItem): any => {
   if (!message.notificationElem?.detail) return undefined;
   try {
@@ -434,15 +442,21 @@ export const getSenderName = (
   currentUserId?: string,
   conversation?: ConversationItem
 ): string => {
-  const sender =
-    currentUserId && message.sendID === currentUserId
-      ? 'Bạn'
-      : message?.senderNickname ||
-        getNotificationOpUserNickname(message) ||
-        (conversation?.peerType === PeerType.Bot
-          ? conversation?.showName || ''
-          : undefined);
-  return sender || '';
+  const isCurrentUser = currentUserId && message.sendID === currentUserId;
+
+  if (isCurrentUser) return 'Bạn';
+
+  switch (conversation?.peerType) {
+    case PeerType.Bot:
+    case PeerType.Customer:
+    case PeerType.User:
+      return '';
+
+    default:
+      return (
+        message?.senderNickname || getNotificationOpUserNickname(message) || ''
+      );
+  }
 };
 
 export interface GetLastMessageTextParams {