@droppii-org/chat-mobile 0.2.80 → 0.2.82

package/src/utils/mentions/mentionRange.ts

@@ -0,0 +1,207 @@
+import type { ActiveMention, Mention } from '../../types/mention';
+import { diffTextChange } from './mentionDiff';
+
+export interface InsertMentionResult {
+  text: string;
+  mentions: Mention[];
+  cursor: number;
+}
+
+let mentionIdCounter = 0;
+const nextMentionId = () => `mention-${Date.now()}-${mentionIdCounter++}`;
+
+/**
+ * Replaces the active "@query" range with "@DisplayName " and commits a new
+ * Mention. The trailing space is deliberately excluded from the mention's
+ * [start,end) range — it's a plain separator, not part of the token. This
+ * keeps the data model simple (no "our space" vs "user-typed space"
+ * special-casing) at the cost of removing a mention immediately after
+ * insertion taking two backspaces (first eats the space, second — now
+ * touching the mention's actual range — triggers atomic removal). Matches
+ * the spec's own fixture: "Hello @Thinh" with NO trailing space, cursor at
+ * the end, backspace removes the whole mention in one step, since there's
+ * no space to consume first.
+ */
+export function insertMention(
+  text: string,
+  mentions: Mention[],
+  activeMention: ActiveMention,
+  selected: { userId: string; displayName: string }
+): InsertMentionResult {
+  const { start, end } = activeMention;
+  const inserted = `@${selected.displayName} `;
+  const newText = text.slice(0, start) + inserted + text.slice(end);
+  const delta = inserted.length - (end - start);
+
+  const newMention: Mention = {
+    id: nextMentionId(),
+    userId: selected.userId,
+    displayName: selected.displayName,
+    start,
+    end: start + 1 + selected.displayName.length,
+  };
+
+  // m.start >= end is safe: an existing committed mention can never overlap
+  // an activeMention's range — findActiveMention's '@'/boundary bail-out
+  // guarantees the active query never reaches back into a prior mention.
+  const shifted = mentions.map((m) =>
+    m.start >= end ? { ...m, start: m.start + delta, end: m.end + delta } : m
+  );
+
+  const nextMentions = [...shifted, newMention].sort(
+    (a, b) => a.start - b.start
+  );
+  const cursor = newMention.end + 1; // after the trailing space
+
+  return { text: newText, mentions: nextMentions, cursor };
+}
+
+export interface ReconcileMentionsResult {
+  mentions: Mention[];
+  invalidated: Mention[];
+}
+
+/**
+ * Re-derives mention ranges after an edit, given only the before/after full
+ * strings (RN's onChangeText carries no delta). Diffs the two strings to
+ * localize the changed region, then per mention: fully before the change ->
+ * kept as-is; fully after -> shifted by the length delta; any overlap at
+ * all -> invalidated (dropped, never left partially stale).
+ *
+ * Boundary semantics matter here: `m.end <= removedStart` (touching-but-
+ * before) is "kept", and `m.start >= removedEnd` (touching-but-after) is
+ * "shift" — so typing immediately after a mention, or deleting text
+ * strictly before one, never invalidates it. Anything else, even a
+ * 1-character overlap, does.
+ */
+export function reconcileMentions({
+  previousText,
+  nextText,
+  mentions,
+}: {
+  previousText: string;
+  nextText: string;
+  mentions: Mention[];
+}): ReconcileMentionsResult {
+  if (nextText === previousText || mentions.length === 0) {
+    return { mentions, invalidated: [] };
+  }
+
+  const { removedStart, removedEnd } = diffTextChange(previousText, nextText);
+  const delta = nextText.length - previousText.length;
+
+  const kept: Mention[] = [];
+  const invalidated: Mention[] = [];
+
+  for (const m of mentions) {
+    if (m.end <= removedStart) {
+      kept.push(m);
+    } else if (m.start >= removedEnd) {
+      kept.push({ ...m, start: m.start + delta, end: m.end + delta });
+    } else {
+      invalidated.push(m);
+    }
+  }
+
+  return { mentions: kept, invalidated };
+}
+
+/**
+ * Expands a delete/replace range so it fully swallows any mention it
+ * merely intersects — this is what makes "atomic delete" actually happen.
+ * RN's Old-Architecture TextInput can't intercept a keypress before the
+ * native buffer mutates, so this doesn't run as a true pre-mutation guard;
+ * it runs on the range diffTextChange computed from an already-applied
+ * edit, and the caller (useMentionComposer) uses the expanded range to
+ * rebuild the text from previousText before React re-renders — see that
+ * hook's doc comment for the full repair sequence.
+ *
+ * The fixed-point loop is needed for the adjacent-mentions case: expanding
+ * to cover one mention can newly overlap a neighbor with zero gap between
+ * them (e.g. loaded from server data with no separator).
+ */
+export function normalizeDeleteRange(
+  range: { start: number; end: number },
+  mentions: Mention[]
+): { start: number; end: number } {
+  let start = Math.min(range.start, range.end);
+  let end = Math.max(range.start, range.end);
+
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const m of mentions) {
+      const overlaps = m.start < end && m.end > start;
+      if (overlaps && (m.start < start || m.end > end)) {
+        start = Math.min(start, m.start);
+        end = Math.max(end, m.end);
+        changed = true;
+      }
+    }
+  }
+
+  return { start, end };
+}
+
+export interface ApplyTextChangeResult {
+  text: string;
+  mentions: Mention[];
+  cursor: number;
+  /** True when this change touched a mention and it was atomically removed. */
+  mentionRemoved: boolean;
+}
+
+/**
+ * The full "atomic delete" pipeline, extracted as a pure function so it's
+ * unit-testable without a live TextInput: diff previousText -> nextTextRaw,
+ * expand the removed range to cover any touched mention, and if it
+ * expanded, discard nextTextRaw for that span and rebuild atomically from
+ * previousText — otherwise just diff-and-shift normally.
+ *
+ * This is what `useMentionComposer` (Phase A2) calls from its
+ * ref-buffered onChangeText reconciliation step; it also imperatively
+ * calls the native `setSelection(cursor, cursor)` after, which is RN-only
+ * and stays out of this pure function.
+ */
+export function applyTextChange(
+  previousText: string,
+  mentions: Mention[],
+  nextTextRaw: string
+): ApplyTextChangeResult {
+  const { removedStart, removedEnd, insertedEnd } = diffTextChange(
+    previousText,
+    nextTextRaw
+  );
+  const expanded = normalizeDeleteRange(
+    { start: removedStart, end: removedEnd },
+    mentions
+  );
+
+  if (expanded.start !== removedStart || expanded.end !== removedEnd) {
+    const finalText =
+      previousText.slice(0, expanded.start) + previousText.slice(expanded.end);
+    const { mentions: keptMentions } = reconcileMentions({
+      previousText,
+      nextText: finalText,
+      mentions,
+    });
+    return {
+      text: finalText,
+      mentions: keptMentions,
+      cursor: expanded.start,
+      mentionRemoved: true,
+    };
+  }
+
+  const { mentions: nextMentions } = reconcileMentions({
+    previousText,
+    nextText: nextTextRaw,
+    mentions,
+  });
+  return {
+    text: nextTextRaw,
+    mentions: nextMentions,
+    cursor: insertedEnd,
+    mentionRemoved: false,
+  };
+}

package/src/utils/mentions/mentionTokenize.ts

@@ -0,0 +1,53 @@
+import type { Mention } from '../../types/mention';
+
+export type Segment =
+  | { type: 'text'; text: string; start: number; end: number }
+  | { type: 'mention'; mention: Mention };
+
+/**
+ * Converts edit-time state (flat string + Mention[] ranges) into an
+ * ordered list of plain-text runs and mention tokens — the shape both the
+ * composer's highlight renderer (Phase A3) and the sent-message bubble
+ * renderer (Phase B3) need to produce their styled `<Text>` children.
+ * Shared by both so the segment-splitting logic exists exactly once.
+ *
+ * O(m log m) sort + O(n) slicing (m = mention count, n = text length) —
+ * trivial at the sizes this feature targets (≤50 mentions, ≤2000 chars).
+ *
+ * Precondition: `mentions` is non-overlapping, guaranteed by Phase A1's own
+ * pipeline (insertMention/reconcileMentions never produce overlaps). The
+ * `m.start < cursor` skip below is a defensive backstop for
+ * externally-sourced data (a message loaded for editing, or an `ex` blob
+ * serialized by an older app version) — not a correctness dependency for
+ * the live composer.
+ */
+export function tokenize(text: string, mentions: Mention[]): Segment[] {
+  const sorted = [...mentions].sort((a, b) => a.start - b.start);
+  const segments: Segment[] = [];
+  let cursor = 0;
+
+  for (const m of sorted) {
+    if (m.start < cursor) continue; // overlapping/malformed entry — skip rather than produce a negative-length slice
+    if (m.start > cursor) {
+      segments.push({
+        type: 'text',
+        text: text.slice(cursor, m.start),
+        start: cursor,
+        end: m.start,
+      });
+    }
+    segments.push({ type: 'mention', mention: m });
+    cursor = m.end;
+  }
+
+  if (cursor < text.length) {
+    segments.push({
+      type: 'text',
+      text: text.slice(cursor),
+      start: cursor,
+      end: text.length,
+    });
+  }
+
+  return segments;
+}

package/src/utils/messageUtils.ts

@@ -272,7 +272,12 @@ export const getMessagePreview = (message?: MessageItem): string => {
       return urlText ? urlText : '';
 
     case MessageType.AtTextMessage:
-      return extractTextContent(message);
+      // Bug: was calling extractTextContent(message) directly, which only
+      // checks message.textElem?.content (wrong elem for this type — always
+      // undefined here) before falling back to JSON.parse(message.content).
+      // atTextElem.text is the actual plain text for this message type —
+      // read it first, matching the QuoteMessage case right below.
+      return message?.atTextElem?.text || extractTextContent(message) || '';
 
     case MessageType.QuoteMessage:
       return message?.quoteElem?.text || extractTextContent(message) || '';
@@ -442,15 +447,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 {

package/src/utils/url.ts

@@ -33,6 +33,36 @@ export function extractUrls(text: string): string[] {
   return text.match(URL_REGEX) ?? [];
 }
 
+export interface TextUrlPart {
+  text: string;
+  isUrl: boolean;
+}
+
+/**
+ * Splits `text` into an ordered run of plain/URL parts — pure data, no
+ * JSX, so both LinkMessage (a whole message that's just text+URLs) and
+ * TextMessage (a mention message whose plain-text *segments* may also
+ * contain a URL) can render URL styling from the same source instead of
+ * two divergent implementations.
+ */
+export function splitTextByUrls(text: string, urls: string[]): TextUrlPart[] {
+  if (!urls.length) return [{ text, isUrl: false }];
+
+  const parts: TextUrlPart[] = [];
+  let remaining = text;
+
+  for (const url of urls) {
+    const idx = remaining.indexOf(url);
+    if (idx === -1) continue;
+    if (idx > 0) parts.push({ text: remaining.slice(0, idx), isUrl: false });
+    parts.push({ text: url, isUrl: true });
+    remaining = remaining.slice(idx + url.length);
+  }
+
+  if (remaining) parts.push({ text: remaining, isUrl: false });
+  return parts;
+}
+
 export function normalizeUrl(url: string) {
   if (!/^https?:\/\//i.test(url)) {
     return `https://${url}`;