@droppii-org/chat-mobile 0.2.105 → 0.2.107

package/src/screens/chat-detail/messageToolbox/MessageToolboxOverlay.tsx

@@ -29,6 +29,7 @@ import { useSendMessage } from '../../../hooks/message/useSendMessage';
 import { useChatContext, useChatDetailContext } from '../../../context';
 import {
   GroupPermission,
+  MessageType,
   type MessageItem,
 } from '@droppii/openim-rn-client-sdk';
 import { useHasGroupPermission } from '../../../hooks/useGroupPermission';
@@ -44,6 +45,13 @@ import type { GroupPosition } from '../../../utils/legendListMessage';
 // scrollTo. See `show`/`hide` below for the observed sequence.
 const UNFREEZE_DELAY_MS = 300;
 
+const EXPANDABLE_TYPES: number[] = [
+  MessageType.TextMessage,
+  MessageType.AtTextMessage,
+  MessageType.UrlTextMessage,
+  MessageType.QuoteMessage,
+];
+
 interface MessageToolboxOverlayProps {
   currentUserId?: string;
   customMessageItemFactory?: (item: MessageItem) => ReactNode;
@@ -209,11 +217,19 @@ export const MessageToolboxOverlay = forwardRef<
       hide();
     }, [message, hide, setQuotedMessage]);
 
+    const overlayMessageId = message?.clientMsgID || message?.serverMsgID || '';
+
     if (!visible || !message || !rect) {
       return null;
     }
 
     const isOutgoing = message.sendID === currentUserId;
+    // Only the types that can show `Xem thêm` get a touchable clone. File
+    // download and consumer custom nodes carry their own handlers and stay
+    // inert.
+    const isCloneInteractive =
+      EXPANDABLE_TYPES.includes(message.contentType) &&
+      !customMessageItemFactory?.(message);
     const showSenderGutter = isGroupConversation && !isOutgoing;
     const showName =
       showSenderGutter &&
@@ -235,10 +251,13 @@ export const MessageToolboxOverlay = forwardRef<
         <MessageToolboxWrapper
           rect={rect}
           isOutgoing={isOutgoing}
+          isCloneInteractive={isCloneInteractive}
+          onDismiss={hide}
           message={
             <LegendChatMessage
               message={message}
-              messageId={message.clientMsgID || message.serverMsgID || ''}
+              messageId={overlayMessageId}
+              isPreview
               isOutgoing={isOutgoing}
               createdAtTime={message.sendTime || message.createTime}
               customMessageItemFactory={customMessageItemFactory}

package/src/screens/chat-detail/messageToolbox/MessageToolboxWrapper.tsx

@@ -1,6 +1,9 @@
-import { useCallback, memo } from 'react';
+import { useCallback, memo, useState } from 'react';
 import {
   View,
+  ScrollView,
+  Pressable,
+  StyleSheet,
   Platform,
   useWindowDimensions,
   type LayoutChangeEvent,
@@ -15,13 +18,31 @@ import type { MeasuredRect } from './types';
 import { messageStyles } from '../legend/messageTypes';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ClonePreviewBudgetContext } from '../../../components/messages/PreviewScrollableText';
+import { useClonePreview } from './useClonePreview';
 
 const MENU_GAP = 8;
+// A clone is never squeezed below this, even if the toolbox is unusually tall —
+// better to overflow slightly than to render a sliver of a message.
+const MIN_CLONE_HEIGHT = 120;
 
 type MessageToolboxWrapperProps = {
   isOutgoing?: boolean;
   rect: MeasuredRect;
   message?: React.ReactNode;
+  /**
+   * Lets touches reach the clone's own press targets — needed for `Xem thêm`
+   * (D1). Off by default: types like FileMessage and consumer custom nodes
+   * have self-contained handlers that must stay inert here.
+   */
+  isCloneInteractive?: boolean;
+  /**
+   * Tapping the bubble used to fall through to the backdrop and dismiss. The
+   * ScrollView below is hit-testable and swallows that, so the gesture is
+   * reinstated explicitly. A touch that a press target inside the clone
+   * claims (`Xem thêm`) never reaches it.
+   */
+  onDismiss?: () => void;
   reaction?: React.ReactNode;
   toolbox?: React.ReactNode;
 };
@@ -31,6 +52,8 @@ export const MessageToolboxWrapper = memo(
     isOutgoing,
     rect,
     message,
+    isCloneInteractive,
+    onDismiss,
     reaction,
     toolbox,
   }: MessageToolboxWrapperProps) => {
@@ -41,6 +64,14 @@ export const MessageToolboxWrapper = memo(
     const topOffset = Platform.OS === 'android' ? insets.top : 0;
     const { height: windowHeight } = useWindowDimensions();
 
+    // Mirrors `toolboxHeight` on the JS side. Deriving the clone's maxHeight
+    // from the shared value instead would close a loop — maxHeight feeds the
+    // clone's height, which feeds `messageHeight`, which feeds `translateY`.
+    // The toolbox's own height does not depend on the clone, so reading it
+    // here settles in one pass. Not ratcheted: the menu's item set varies with
+    // permissions, and a high-water mark could never shrink back.
+    const [chromeHeight, setChromeHeight] = useState(0);
+
     const onMessageCloneLayout = useCallback(
       ({ nativeEvent }: LayoutChangeEvent) => {
         messageHeight.value = nativeEvent.layout.height;
@@ -51,6 +82,7 @@ export const MessageToolboxWrapper = memo(
     const onToolboxLayout = useCallback(
       ({ nativeEvent }: LayoutChangeEvent) => {
         toolboxHeight.value = nativeEvent.layout.height;
+        setChromeHeight(nativeEvent.layout.height);
       },
       [toolboxHeight]
     );
@@ -62,6 +94,21 @@ export const MessageToolboxWrapper = memo(
       [reactionHeight]
     );
 
+    // Same quantities `translateY` below subtracts, so the clone is never
+    // allowed to be taller than the space that shift can actually recover —
+    // `translateY` only moves up, so an over-tall clone pushes the toolbox off
+    // the bottom of the screen with no way back.
+    const maxCloneHeight = Math.max(
+      windowHeight -
+        insets.top -
+        topOffset -
+        (insets.bottom || 32) -
+        chromeHeight -
+        3 * MENU_GAP,
+      MIN_CLONE_HEIGHT
+    );
+    const preview = useClonePreview(maxCloneHeight);
+
     const translateY = useDerivedValue(() => {
       const menuGap =
         (reactionHeight.value > 0 ? MENU_GAP : 0) +
@@ -85,6 +132,10 @@ export const MessageToolboxWrapper = memo(
       width: rect.width,
       gap: MENU_GAP,
       transform: [{ translateY: translateY.value }],
+      // Until the toolbox has measured, the clone's budget is over-large and
+      // `translateY` is computed against a toolbox height of 0, which produces
+      // a visible two-stage slide on every open. Lay out, then reveal.
+      opacity: chromeHeight > 0 ? 1 : 0,
     }));
 
     return (
@@ -97,13 +148,40 @@ export const MessageToolboxWrapper = memo(
           containerStyles,
         ]}
       >
-        <View
-          pointerEvents="none"
+        <ScrollView
+          style={[styles.clone, { maxHeight: maxCloneHeight }]}
           collapsable={false}
           onLayout={onMessageCloneLayout}
+          onContentSizeChange={preview.onContentSizeChange}
+          bounces={false}
+          showsVerticalScrollIndicator={false}
         >
-          {message}
-        </View>
+          <Pressable onPress={onDismiss} disabled={preview.dismissDisabled}>
+            <View
+              pointerEvents={isCloneInteractive ? 'box-none' : 'none'}
+              style={isOutgoing ? styles.rowEnd : styles.rowStart}
+            >
+              {/* While the Pressable above stands down (see useClonePreview),
+                  the empty space beside the bubble still has to dismiss. This
+                  layer sits BEHIND the message as a sibling, so it is not an
+                  ancestor of the text's ScrollView and cannot block it. Being
+                  absolute, it also leaves `message` the row's only flex child
+                  (the 80% width contract documented below). */}
+              {preview.dismissDisabled && (
+                <Pressable
+                  style={StyleSheet.absoluteFill}
+                  onPress={onDismiss}
+                />
+              )}
+              {/* Expanded text scrolls inside its own bubble within this
+                  budget, so this outer scroll only remains for content that
+                  cannot (a tall image), and the bubble keeps its corners. */}
+              <ClonePreviewBudgetContext.Provider value={preview.budget}>
+                {message}
+              </ClonePreviewBudgetContext.Provider>
+            </View>
+          </Pressable>
+        </ScrollView>
         <View collapsable={false} onLayout={onReactionLayout}>
           {reaction}
         </View>
@@ -116,3 +194,31 @@ export const MessageToolboxWrapper = memo(
 );
 
 MessageToolboxWrapper.displayName = 'MessageToolboxWrapper';
+
+const styles = StyleSheet.create({
+  // maxHeight belongs on the ScrollView itself — inside an auto-height parent a
+  // ScrollView collapses to zero.
+  //
+  // `rowStart`/`rowEnd` reproduce the contract `LegendChatMessage` gets from
+  // the real list row: its root (`maxWidth: '80%'`) must be the DIRECT child
+  // of a definite-width, non-stretching (`alignItems`) View. Any auto-width
+  // node in between (an extra View, a non-stretched Pressable) leaves the 80%
+  // with no definite basis, and Yoga collapses the bubble toward min-content —
+  // on device, "M2" wrapping to "M" / "2". The Pressable sits outside this
+  // View, stretched by the ScrollView's content container, so the chain from
+  // the clone's measured width down to the bubble stays definite throughout.
+  // Not `messageRowLeft/Right` directly: the outer Animated.View already
+  // applies their padding, which would double up here.
+  clone: {
+    flexGrow: 0,
+    width: '100%',
+  },
+  rowStart: {
+    width: '100%',
+    alignItems: 'flex-start',
+  },
+  rowEnd: {
+    width: '100%',
+    alignItems: 'flex-end',
+  },
+});

package/src/screens/chat-detail/messageToolbox/useClonePreview.ts

@@ -0,0 +1,34 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { ClonePreviewBudget } from '../../../components/messages/PreviewScrollableText';
+
+/**
+ * Wiring between the overlay's clone and the expanded text that scrolls
+ * inside it (see `PreviewScrollableText`).
+ *
+ * `dismissDisabled`: the clone sits in a tap-to-dismiss Pressable. On iOS a
+ * ScrollView refuses to scroll while an ANCESTOR holds the JS responder
+ * (`RCTScrollView _shouldDisableScrollInteraction`), so with the Pressable
+ * enabled a drag on the text never scrolls — it ends as a tap and closes the
+ * overlay. While the text is scrollable the Pressable stands down; the
+ * backdrop and the menu still dismiss.
+ */
+export const useClonePreview = (maxHeight: number) => {
+  const [contentHeight, setContentHeight] = useState(0);
+  const [textScrollable, setTextScrollable] = useState(false);
+
+  const onContentSizeChange = useCallback(
+    (_width: number, height: number) => setContentHeight(height),
+    []
+  );
+
+  const budget = useMemo<ClonePreviewBudget>(
+    () => ({
+      maxHeight,
+      contentHeight,
+      onScrollableChange: setTextScrollable,
+    }),
+    [maxHeight, contentHeight]
+  );
+
+  return { budget, onContentSizeChange, dismissDisabled: textScrollable };
+};

package/src/store/expandedMessage.ts

@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+import {
+  expandedKey,
+  withoutSurface,
+  type MessageSurface,
+} from '../utils/expandableText';
+
+export type { MessageSurface };
+export { expandedKey };
+
+export interface ExpandedMessageStore {
+  /**
+   * Flat record rather than a Set so a row can subscribe with a cheap boolean
+   * selector — `useExpandedMessageStore(s => !!s.expanded[key])` — which stays
+   * referentially stable for every message the change didn't touch.
+   */
+  expanded: Record<string, true>;
+  expand: (surface: MessageSurface, messageId: string) => void;
+  clearSurface: (surface: MessageSurface) => void;
+}
+
+export const useExpandedMessageStore = create<ExpandedMessageStore>()(
+  (set, get) => ({
+    expanded: {},
+
+    expand: (surface, messageId) => {
+      // A message with no id would alias onto `${surface}:` and expand every
+      // other id-less message with it.
+      if (!messageId) return;
+
+      const key = expandedKey(surface, messageId);
+      if (get().expanded[key]) return;
+
+      set({ expanded: { ...get().expanded, [key]: true } });
+    },
+
+    clearSurface: (surface) => {
+      const next = withoutSurface(get().expanded, surface);
+      if (next !== get().expanded) set({ expanded: next });
+    },
+  })
+);

package/src/store/index.ts

@@ -1,3 +1,4 @@
 export * from './storeConfig';
 export * from './user';
 export * from './conversation';
+export * from './inputState';

package/src/store/inputState.ts

@@ -0,0 +1,76 @@
+import { create } from 'zustand';
+import type { ConversationInputStatus } from '@droppii/openim-rn-client-sdk';
+import type {
+  ConversationInputState,
+  InputStateMap,
+} from '../utils/inputState';
+
+export interface InputStateStore {
+  /** conversationID -> userID -> record. */
+  byConversation: InputStateMap;
+  /**
+   * Apply one OnInputStatusChanged payload.
+   *
+   * A non-empty `platformIDs` means that user is composing; an empty list is
+   * how the SDK reports that they stopped, so it removes them outright rather
+   * than storing an inactive record.
+   */
+  applyInputStatus: (status: ConversationInputStatus) => void;
+  /** Remove one user now — their message arrived, or they went idle. */
+  removeTyper: (conversationID: string, userID: string) => void;
+}
+
+const withoutUser = (
+  state: ConversationInputState,
+  userID: string
+): ConversationInputState | undefined => {
+  const next = { ...state };
+  delete next[userID];
+  // Undefined rather than an empty object, so a leftover record can never read
+  // as "somebody is typing".
+  return Object.keys(next).length > 0 ? next : undefined;
+};
+
+export const useInputStateStore = create<InputStateStore>()((set) => ({
+  byConversation: {},
+
+  applyInputStatus({ conversationID, userID, platformIDs }) {
+    if (!conversationID || !userID) return;
+
+    set((state) => {
+      const current = state.byConversation[conversationID];
+
+      if (!platformIDs || platformIDs.length === 0) {
+        if (!current?.[userID]) return state;
+        const remaining = withoutUser(current, userID);
+        const byConversation = { ...state.byConversation };
+        if (remaining) byConversation[conversationID] = remaining;
+        else delete byConversation[conversationID];
+        return { byConversation };
+      }
+
+      return {
+        byConversation: {
+          ...state.byConversation,
+          [conversationID]: {
+            ...current,
+            [userID]: { userID, platformIDs, updatedAt: Date.now() },
+          },
+        },
+      };
+    });
+  },
+
+  removeTyper(conversationID, userID) {
+    set((state) => {
+      const current = state.byConversation[conversationID];
+      if (!current?.[userID]) return state;
+
+      const remaining = withoutUser(current, userID);
+      const byConversation = { ...state.byConversation };
+      if (remaining) byConversation[conversationID] = remaining;
+      else delete byConversation[conversationID];
+      return { byConversation };
+    });
+  },
+}));

package/src/translation/resources/i18n.ts

@@ -1,6 +1,8 @@
 const i18nKey: Record<string, string> = {
   'thread_card_bot_crm_name': 'Droppii Hỗ Trợ',
   'thread_card_fallback_name': 'Người dùng',
+  'chat:typing_single': '<bold>{{name}}</bold> đang nhập',
+  'chat:typing_multiple': 'Nhiều người đang nhập',
   'chat:file_too_large':
     'Tệp tải lên không hợp lệ. Kích thước tệp không được vượt quá {{maxSize}}MB',
   'chat:file_max_count': 'Chỉ có thể đính kèm tối đa 3 tệp',

package/src/utils/expandableText.ts

@@ -0,0 +1,51 @@
+export type MessageSurface = 'timeline' | 'pin';
+
+export const COLLAPSED_LINES = 5;
+
+const MEASURE_THRESHOLD_CHARS = 100;
+
+export const expandedKey = (surface: MessageSurface, messageId: string) =>
+  `${surface}:${messageId}`;
+
+const countNewlines = (text: string) => {
+  let count = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    if (text.charCodeAt(i) === 10) count += 1;
+  }
+  return count;
+};
+
+/**
+ * Character count alone is not an approximation of rendered lines — it is
+ * wrong for the shapes this chat carries most (pasted addresses, order lists),
+ * where an eight-line message can be under 70 characters. Newlines cost one
+ * character and a whole line, so both signals are needed. Message text is
+ * sender-controlled, so a length-only gate is also trivially defeated.
+ */
+export const isMeasurementCandidate = (text: string) =>
+  text.length >= MEASURE_THRESHOLD_CHARS ||
+  countNewlines(text) >= COLLAPSED_LINES;
+
+/**
+ * Returns a copy without the entries belonging to `surface`, or the original
+ * reference when nothing matched — callers use that identity to skip a
+ * pointless store update.
+ */
+export const withoutSurface = (
+  expanded: Record<string, true>,
+  surface: MessageSurface
+): Record<string, true> => {
+  const prefix = `${surface}:`;
+  const next: Record<string, true> = {};
+  let removed = false;
+
+  for (const key in expanded) {
+    if (key.startsWith(prefix)) {
+      removed = true;
+    } else {
+      next[key] = true;
+    }
+  }
+
+  return removed ? next : expanded;
+};

package/src/utils/inlineTruncation.ts

@@ -0,0 +1,65 @@
+/**
+ * Cut-point arithmetic for the inline `... Xem thêm` preview. Everything here
+ * works on the lines RN reports from `onTextLayout`, whose `text` includes the
+ * line's trailing break — so joining them reproduces the rendered string and a
+ * running length is a valid character offset into it.
+ */
+export interface RenderedLine {
+  text: string;
+}
+
+// How far back a shrink may look for a word boundary before accepting a
+// mid-word cut. One long unbroken token (a URL) must still be cuttable.
+const WORD_SNAP_WINDOW = 20;
+
+const isSpace = (char: string | undefined) => !!char && /\s/.test(char);
+
+const isHighSurrogate = (code: number) => code >= 0xd800 && code <= 0xdbff;
+
+export const joinLines = (lines: readonly RenderedLine[]) =>
+  lines.map((line) => line.text).join('');
+
+/**
+ * Backs `cut` off trailing whitespace — a kept `\n` would push the suffix onto
+ * a line of its own — and off half an emoji, which would render as a tofu box.
+ */
+export const settleCut = (full: string, cut: number) => {
+  let next = Math.max(0, Math.min(cut, full.length));
+  if (next > 0 && isHighSurrogate(full.charCodeAt(next - 1))) next -= 1;
+  while (next > 0 && isSpace(full[next - 1])) next -= 1;
+  return next;
+};
+
+/** First guess: everything on the first `maxLines` lines. */
+export const initialCut = (
+  lines: readonly RenderedLine[],
+  maxLines: number
+) => {
+  const full = joinLines(lines);
+  return settleCut(full, joinLines(lines.slice(0, maxLines)).length);
+};
+
+/**
+ * The suffix did not fit and wrapped past `maxLines`. Drop at least as many
+ * characters as spilled over — the spill includes the suffix itself, so this
+ * converges in one or two passes — then prefer ending on a word.
+ */
+export const shrinkCut = (
+  full: string,
+  cut: number,
+  fittedLines: readonly RenderedLine[],
+  maxLines: number
+) => {
+  const overflow = joinLines(fittedLines.slice(maxLines)).length;
+  let next = Math.max(0, cut - Math.max(overflow, 1));
+
+  const floor = Math.max(0, next - WORD_SNAP_WINDOW);
+  for (let i = next; i > floor; i -= 1) {
+    if (isSpace(full[i - 1])) {
+      next = i;
+      break;
+    }
+  }
+
+  return settleCut(full, next);
+};

package/src/utils/inputState.ts

@@ -0,0 +1,104 @@
+import type { Platform } from '@droppii/openim-rn-client-sdk';
+
+/** A typer drops out this long after their last signal — BR-002. */
+export const INPUT_STATE_TTL = 3_000;
+
+/** A single name longer than this is truncated before it goes in the sentence. */
+const TYPING_NAME_MAX_LENGTH = 30;
+
+export interface InputStateRecord {
+  userID: string;
+  /** Devices that user is composing from. An empty list means they stopped. */
+  platformIDs: Platform[];
+  /** When their most recent signal arrived — the clock the TTL runs against. */
+  updatedAt: number;
+}
+
+/** userID -> record, for one conversation. */
+export type ConversationInputState = Readonly<Record<string, InputStateRecord>>;
+
+/** conversationID -> that conversation's typers. */
+export type InputStateMap = Readonly<Record<string, ConversationInputState>>;
+
+const EMPTY_TYPERS: readonly InputStateRecord[] = [];
+
+/**
+ * Typers still inside the TTL window, oldest signal first.
+ *
+ * Expiry is derived from `updatedAt` rather than driven by one timer per user:
+ * the whole point is that each typer runs on their own clock. With A typing at
+ * t=0 and B at t=2s, A has to drop at t=3s while B stays until t=5s — a single
+ * shared timer reset by the newest signal would keep both alive to t=5s.
+ */
+export const getActiveTypers = (
+  state: ConversationInputState | undefined,
+  now: number
+): readonly InputStateRecord[] => {
+  if (!state) return EMPTY_TYPERS;
+
+  const active = Object.values(state).filter(
+    (record) =>
+      record.platformIDs.length > 0 && now - record.updatedAt < INPUT_STATE_TTL
+  );
+
+  if (active.length === 0) return EMPTY_TYPERS;
+  return active.sort((a, b) => a.updatedAt - b.updatedAt);
+};
+
+/**
+ * When the next active typer falls out of the window, or null if none will.
+ *
+ * The caller uses this to wake up exactly once per expiry instead of polling.
+ */
+export const getNextExpiryAt = (
+  state: ConversationInputState | undefined,
+  now: number
+): number | null => {
+  const active = getActiveTypers(state, now);
+  if (active.length === 0) return null;
+
+  // Sorted oldest first, so the first entry expires first.
+  return active[0]!.updatedAt + INPUT_STATE_TTL;
+};
+
+export const truncateTypingName = (name: string): string =>
+  name.length > TYPING_NAME_MAX_LENGTH
+    ? `${name.slice(0, TYPING_NAME_MAX_LENGTH)}...`
+    : name;
+
+/**
+ * Which copy to render, as a key plus its values.
+ *
+ * Deliberately not a finished string: the name is styled differently from the
+ * rest of the sentence, so the caller needs the pieces separately to hand them
+ * to a rich-text renderer. Keeping translation out of here also leaves this
+ * module free of any dependency on the i18n layer.
+ */
+export interface TypingTextDescriptor {
+  key: string;
+  values?: Record<string, string>;
+}
+
+export const TYPING_TEXT_KEYS = {
+  single: 'chat:typing_single',
+  multiple: 'chat:typing_multiple',
+} as const;
+
+/**
+ * Copy for a set of typers, or null when the indicator should be hidden.
+ *
+ * Only one typer is ever named. Beyond that the sentence collapses, so the
+ * caller never has to resolve a second name.
+ */
+export const resolveTypingText = (
+  typerCount: number,
+  singleName?: string
+): TypingTextDescriptor | null => {
+  if (typerCount === 0) return null;
+  if (typerCount > 1) return { key: TYPING_TEXT_KEYS.multiple };
+  if (!singleName) return null;
+  return {
+    key: TYPING_TEXT_KEYS.single,
+    values: { name: truncateTypingName(singleName) },
+  };
+};

package/src/utils/message.ts

@@ -119,6 +119,21 @@ export const hasNewHistoryMessages = (
   });
 };
 
+/**
+ * Conversation ids a message could be filed under.
+ *
+ * A 1:1 id is built from both participants and their order is not recoverable
+ * from the message alone, so both spellings come back — `belongsToConversation`
+ * compares against both for exactly the same reason.
+ */
+export const conversationIdsOfMessage = (message: MessageItem): string[] =>
+  message.sessionType === SessionType.Group
+    ? [getConversationID(SessionType.Group, message.groupID)]
+    : [
+        getConversationID(SessionType.Single, message.sendID, message.recvID),
+        getConversationID(SessionType.Single, message.recvID, message.sendID),
+      ];
+
 export const belongsToConversation = (
   message: MessageItem,
   conversationId?: string,