@droppii-org/chat-mobile 0.2.105 → 0.2.107

package/src/core/useChatListener.ts

@@ -7,6 +7,7 @@ import OpenIMSDK, {
   type ConversationItem,
   type GroupApplicationItem,
   type GroupItem,
+  type ConversationInputStatus,
   type GroupMemberItem,
   type MessageItem,
   type MessagePinned,
@@ -25,7 +26,11 @@ import { useChatContext } from '../context';
 import isEmpty from 'lodash/isEmpty';
 import { markMessageRevoked, useMessageStore } from '../store/message';
 import { syncPinnedMessagesOnEvent } from '../hooks/message/usePinMessage';
-import { belongsToConversation } from '../utils/message';
+import {
+  belongsToConversation,
+  conversationIdsOfMessage,
+} from '../utils/message';
+import { useInputStateStore } from '../store/inputState';
 import { getConversationID } from '../utils/conversation';
 import { clearSelfExitedGroup } from '../utils/groupExit';
 import { DeviceEventEmitter } from 'react-native';
@@ -371,8 +376,34 @@ export const useChatListener = () => {
     [updateOneMessage]
   );
 
+  const onInputStatusChanged = useCallback(
+    (status: ConversationInputStatus) => {
+      // Never reflect the viewer's own composing back at them.
+      if (!status?.userID || status.userID === currentUserId) return;
+
+      // Stored for every conversation, not just the open one: the thread list
+      // shows typing for threads the user is not currently inside, and the
+      // store is keyed by conversation so each reader takes only its own.
+      useInputStateStore.getState().applyInputStatus(status);
+    },
+    [currentUserId]
+  );
+
   const onRecvNewMessages = useCallback((messages: MessageItem[]) => {
     // console.log('[Listener] OnRecvNewMessages', messages);
+    // A sender whose message just arrived has stopped composing. Runs over
+    // every message and above the guards below, because typing is tracked for
+    // all conversations rather than only the open one — and those guards bail
+    // outright while the user is sitting on the inbox.
+    const { removeTyper } = useInputStateStore.getState();
+    for (const message of messages) {
+      const senderId = message.sendID;
+      if (!senderId) continue;
+      conversationIdsOfMessage(message).forEach((id) =>
+        removeTyper(id, senderId)
+      );
+    }
+
     const conversationId =
       useConversationStore.getState().currentConversationId;
     const targetUserId = useConversationStore.getState().currentUserId;
@@ -415,6 +446,7 @@ export const useChatListener = () => {
     OpenIMSDK.on(OpenIMEvent.OnNewRecvMessageRevoked, onMessageRevoked);
     OpenIMSDK.on(OpenIMEvent.OnRecvMessagePinned, onMessagePinned);
     OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
+    OpenIMSDK.on(OpenIMEvent.OnInputStatusChanged, onInputStatusChanged);
     OpenIMSDK.on(
       OpenIMEvent.OnRecvOfflineNewMessages,
       onRecvOfflineNewMessages
@@ -444,6 +476,7 @@ export const useChatListener = () => {
       // Message status
       OpenIMSDK.off(OpenIMEvent.SendMessageProgress, onSendMessageProgress);
       OpenIMSDK.off(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
+      OpenIMSDK.off(OpenIMEvent.OnInputStatusChanged, onInputStatusChanged);
       OpenIMSDK.off(OpenIMEvent.OnNewRecvMessageRevoked, onMessageRevoked);
       OpenIMSDK.off(OpenIMEvent.OnRecvMessagePinned, onMessagePinned);
       OpenIMSDK.off(
@@ -461,6 +494,7 @@ export const useChatListener = () => {
     onNewConversation,
     onSendMessageProgress,
     onRecvNewMessages,
+    onInputStatusChanged,
     onRecvOfflineNewMessages,
     OnGroupMemberInfoChanged,
     onJoinedGroupDeleted,

package/src/hooks/groups/useGroupMemberName.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import { groupQueryKeys } from '../query-keys';
+
+/**
+ * Display name of one group member.
+ *
+ * Fetches a single member rather than the whole roster: the only place this is
+ * needed is the typing sentence, which names at most one person — beyond that
+ * the copy collapses to "Nhiều người". Cached by react-query so a dot flickering
+ * on and off does not re-hit the SDK.
+ */
+export const useGroupMemberName = (
+  groupID?: string,
+  userID?: string
+): string | undefined => {
+  const { data } = useQuery({
+    queryKey: groupQueryKeys.member(groupID, userID),
+    enabled: !!groupID && !!userID,
+    staleTime: 5 * 60_000,
+    queryFn: async () => {
+      const members = await OpenIMSDK.getSpecifiedGroupMembersInfo({
+        groupID: groupID!,
+        userIDList: [userID!],
+      });
+      return members?.[0]?.nickname ?? null;
+    },
+  });
+
+  return data ?? undefined;
+};

package/src/hooks/query-keys.ts

@@ -83,4 +83,6 @@ export const groupQueryKeys = {
   leave: () => [...groupQueryKeys.all, 'leave'] as const,
   inviteInfo: (code: string) =>
     [...groupQueryKeys.all, 'inviteInfo', code] as const,
+  member: (groupID?: string, userID?: string) =>
+    [...groupQueryKeys.all, 'member', groupID, userID] as const,
 };

package/src/hooks/useExpandableText.ts

@@ -0,0 +1,139 @@
+import { useCallback, useState } from 'react';
+import { useWindowDimensions, type TextLayoutEvent } from 'react-native';
+import { useExpandedMessageStore } from '../store/expandedMessage';
+import {
+  COLLAPSED_LINES,
+  expandedKey,
+  isMeasurementCandidate,
+  type MessageSurface,
+} from '../utils/expandableText';
+import { initialCut, joinLines, shrinkCut } from '../utils/inlineTruncation';
+
+export { COLLAPSED_LINES };
+
+type Verdict = { truncated: false } | { truncated: true; cut: number };
+
+// Each pass is one extra layout; in practice the suffix fits by the second.
+// Past this the suffix may sit on a sixth line — still visible and tappable.
+const MAX_FIT_PASSES = 4;
+
+/**
+ * Truncation is a pure function of (text, available width, typography), so it
+ * belongs to the message — not to the list row that happens to render it.
+ * `recycleItems` reuses row instances, so a verdict held in component state
+ * bleeds onto the next message in that slot. Keyed here, a recycled row reads
+ * the right answer during render and pays no measurement for a message seen.
+ */
+const verdictCache = new Map<string, Verdict>();
+
+export const clearExpandableTextCache = () => verdictCache.clear();
+
+// Window width, not the bubble's: the bubble shrinks to its content, and the
+// content changes when the suffix is appended, so keying on it would re-measure
+// in a loop. Surface is in the key because the pin sheet is a different width.
+// Text length makes a body that mutates in place (TextMessage re-derives its
+// runs when `ex` arrives) miss the cache rather than reuse a stale cut.
+const verdictKey = (
+  surface: MessageSurface,
+  messageId: string,
+  windowWidth: number,
+  text: string
+) => `${surface}:${messageId}:${Math.round(windowWidth)}:${text.length}`;
+
+interface Fit {
+  key: string | null;
+  full?: string;
+  cut?: number;
+  passes: number;
+  verdict?: Verdict;
+}
+
+export type ExpandableTextMode =
+  | 'plain'
+  | 'measuring'
+  | 'fitting'
+  | 'collapsed';
+
+export function useExpandableText(
+  messageId: string,
+  text: string,
+  surface: MessageSurface
+) {
+  const expanded = useExpandedMessageStore(
+    (s) => !!s.expanded[expandedKey(surface, messageId)]
+  );
+  const expandInStore = useExpandedMessageStore((s) => s.expand);
+  const { width: windowWidth } = useWindowDimensions();
+
+  const key = messageId
+    ? verdictKey(surface, messageId, windowWidth, text)
+    : null;
+
+  // Reset during render rather than in an effect: an effect lands after paint,
+  // so a recycled row would show one frame with the previous message's cut.
+  const [fit, setFit] = useState<Fit>({ key, passes: 0 });
+  const current = fit.key === key ? fit : { key, passes: 0 };
+  if (fit.key !== key) setFit(current);
+
+  // Without an id there is nowhere to record an expansion, so the control
+  // would do nothing. Never collapse those.
+  const isCandidate = !!messageId && !expanded && isMeasurementCandidate(text);
+  const verdict = (key && verdictCache.get(key)) || current.verdict;
+
+  let mode: ExpandableTextMode = 'plain';
+  if (isCandidate) {
+    if (verdict) mode = verdict.truncated ? 'collapsed' : 'plain';
+    else mode = current.cut == null ? 'measuring' : 'fitting';
+  }
+  const cut = verdict?.truncated ? verdict.cut : (current.cut ?? 0);
+
+  const settle = useCallback(
+    (next: Verdict) => {
+      if (key) verdictCache.set(key, next);
+      setFit((prev) => (prev.key === key ? { ...prev, verdict: next } : prev));
+    },
+    [key]
+  );
+
+  // Full, unclamped copy: how many lines, and where line N ends.
+  const onMeasureTextLayout = useCallback(
+    ({ nativeEvent: { lines } }: TextLayoutEvent) => {
+      if (lines.length <= COLLAPSED_LINES) {
+        settle({ truncated: false });
+        return;
+      }
+      const full = joinLines(lines);
+      const first = initialCut(lines, COLLAPSED_LINES);
+      setFit((prev) =>
+        prev.key === key ? { ...prev, full, cut: first, passes: 0 } : prev
+      );
+    },
+    [key, settle]
+  );
+
+  // The visible copy with the suffix appended: accept once it fits in N lines.
+  const onFitTextLayout = useCallback(
+    ({ nativeEvent: { lines } }: TextLayoutEvent) => {
+      if (fit.key !== key || fit.full == null || fit.cut == null) return;
+      if (lines.length <= COLLAPSED_LINES || fit.passes >= MAX_FIT_PASSES) {
+        settle({ truncated: true, cut: fit.cut });
+        return;
+      }
+      const next = shrinkCut(fit.full, fit.cut, lines, COLLAPSED_LINES);
+      setFit({ ...fit, cut: next, passes: fit.passes + 1 });
+    },
+    [fit, key, settle]
+  );
+
+  const expand = useCallback(() => {
+    expandInStore(surface, messageId);
+  }, [expandInStore, surface, messageId]);
+
+  return {
+    mode,
+    cut,
+    expand,
+    onMeasureTextLayout,
+    onFitTextLayout,
+  };
+}

package/src/hooks/useInputState.ts

@@ -0,0 +1,57 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useInputStateStore } from '../store';
+import {
+  getActiveTypers,
+  getNextExpiryAt,
+  type InputStateRecord,
+} from '../utils/inputState';
+
+export interface InputStateResult {
+  /**
+   * Whether the indicator belongs on screen. Unlike the sentence this needs no
+   * name, so it can be answered here.
+   */
+  isTyping: boolean;
+  /** Everyone still inside the window, oldest signal first. */
+  typers: readonly InputStateRecord[];
+}
+
+/**
+ * Typing state for one conversation.
+ *
+ * Expiry is read from each record's timestamp rather than tracked with a timer
+ * per user, and the hook schedules a single wake-up at the moment the next
+ * typer falls out of the window. So with A typing at t=0 and B at t=2s the
+ * sentence moves from A, to both, to B alone at t=3s, and disappears at t=5s —
+ * without polling between those points.
+ */
+export const useInputState = (conversationID?: string): InputStateResult => {
+  const state = useInputStateStore((store) =>
+    conversationID ? store.byConversation[conversationID] : undefined
+  );
+  // Bumped by the expiry timer below. Records go stale on a clock rather than
+  // on a store write, so something has to ask the question again.
+  const [tick, setTick] = useState(0);
+
+  const typers = useMemo(
+    // `tick` is not read here — it is a dep so that the expiry timer below can
+    // force a recount. Records fall out of the window on a clock, so `state`
+    // alone would leave an expired typer on screen until the next store write.
+    () => getActiveTypers(state, Date.now()),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state, tick]
+  );
+
+  useEffect(() => {
+    const expiresAt = getNextExpiryAt(state, Date.now());
+    if (expiresAt === null) return;
+
+    const timer = setTimeout(
+      () => setTick((value) => value + 1),
+      Math.max(0, expiresAt - Date.now())
+    );
+    return () => clearTimeout(timer);
+  }, [state, typers]);
+
+  return { isTyping: typers.length > 0, typers };
+};

package/src/hooks/useInputStateBroadcast.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef } from 'react';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+
+/**
+ * Broadcasts this device's composing state for a conversation.
+ *
+ * The SDK throttles the outgoing frames itself, so `notifyTyping` is safe to
+ * call on every keystroke — no debounce here would only duplicate that. What
+ * this hook does own is the start/stop rule: an empty draft counts as stopping,
+ * not as typing, and leaving the screen has to stop too or the peer is left
+ * watching an indicator for a composer nobody is in front of.
+ */
+export const useInputStateBroadcast = (conversationID?: string) => {
+  // Mirrors what we last told the SDK, so a cleared draft or a blur does not
+  // fire a stop frame for a conversation we never announced typing in.
+  const isTypingRef = useRef(false);
+
+  const send = useCallback(
+    (focus: boolean) => {
+      if (!conversationID) return;
+      // Only a repeated *stop* is redundant. A repeated start is the heartbeat
+      // that keeps the peer's TTL window open — suppressing it would let the
+      // indicator expire while the person is still typing.
+      if (!focus && !isTypingRef.current) return;
+
+      isTypingRef.current = focus;
+      OpenIMSDK.changeInputStates({ conversationID, focus }).catch(() => {
+        // Typing state is cosmetic — a failed frame must not surface to the
+        // person typing, and the peer's own 3s window cleans up after it.
+        isTypingRef.current = !focus;
+      });
+    },
+    [conversationID]
+  );
+
+  /** Any draft change: text present means typing, empty means stopped. */
+  const notifyTyping = useCallback(
+    (text?: string) => send(!!text && text.trim().length > 0),
+    [send]
+  );
+
+  /** Explicit stop — message sent, input blurred, screen left. */
+  const notifyStoppedTyping = useCallback(() => send(false), [send]);
+
+  // Switching conversations, or unmounting, stops the previous one.
+  useEffect(() => {
+    return () => {
+      notifyStoppedTyping();
+    };
+  }, [notifyStoppedTyping]);
+
+  return { notifyTyping, notifyStoppedTyping };
+};

package/src/screens/chat-detail/ChatComposer.tsx

@@ -59,6 +59,7 @@ import { DFlowState } from '../../types/chat';
 import { useAttachmentMapping } from './hooks/useAttachmentMapping';
 import type { AttachmentType } from '../../types/attachment';
 import { useChatCompose } from '../../hooks/useChatCompose';
+import { useInputStateBroadcast } from '../../hooks/useInputStateBroadcast';
 import { ChatCurrentQuotedMessage } from './ChatCurrentQuotedMessage';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import { openBotMenuSheet } from './BotMenuSheet';
@@ -111,6 +112,9 @@ export const ChatComposer = memo(
     const { mutateAsync: closeSupportSession } = useCloseSupportSession();
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
+    const { notifyTyping, notifyStoppedTyping } = useInputStateBroadcast(
+      conversation?.conversationID
+    );
     const { allowed: isSendMessageAllowed, reason: sendDeniedReason } =
       useCanSendMessage();
 
@@ -226,6 +230,9 @@ export const ChatComposer = memo(
       // "ghost" mention anchored past the end of an empty string). See
       // useMentionComposer.clear()'s doc comment.
       mentionComposer.clear();
+      // Stop before awaiting the send: the peer should lose the indicator as
+      // the message goes out, not once it round-trips.
+      notifyStoppedTyping();
       try {
         await compose.send(mentionsToSend);
       } catch (error) {
@@ -248,6 +255,7 @@ export const ChatComposer = memo(
       sendDeniedReason,
       mentionComposer.mentions,
       mentionComposer.clear,
+      notifyStoppedTyping,
       inputRef,
     ]);
 
@@ -324,12 +332,19 @@ export const ChatComposer = memo(
 
     const handleInputBlur = useCallback(() => {
       setIsInputFocused(false);
-    }, [setIsInputFocused]);
+      notifyStoppedTyping();
+    }, [setIsInputFocused, notifyStoppedTyping]);
 
     // Routes through mentionComposer instead of compose.setText directly —
     // it owns the atomic-delete/reconcile pipeline and calls compose.setText
     // itself once the corrected text is known (see useMentionComposer).
-    const handleChangeText = mentionComposer.handleChangeText;
+    const handleChangeText = useCallback(
+      (text?: string) => {
+        notifyTyping(text);
+        mentionComposer.handleChangeText(text);
+      },
+      [notifyTyping, mentionComposer]
+    );
 
     const handleInputContentSizeChange = useCallback(
       (event: { nativeEvent: { contentSize: { height: number } } }) => {

package/src/screens/chat-detail/ChatDetail.tsx

@@ -18,6 +18,8 @@ import {
   useConversationStore,
   useUserStore,
 } from '../../store';
+import { useExpandedMessageStore } from '../../store/expandedMessage';
+import { clearExpandableTextCache } from '../../hooks/useExpandableText';
 import ChatDetailHeader from './ChatDetailHeader';
 import { ChatListLegend } from './ChatListLegend';
 import { ChatComposer } from './ChatComposer';
@@ -81,6 +83,15 @@ const ChatDetail = memo(
 
     const conversation = useConversation(conversationId);
 
+    // Keyed on the conversation, not on unmount: this screen is mounted by the
+    // consumer's navigator, so whether it remounts per conversation or is
+    // reused with a new id is not knowable here. Reopening a conversation must
+    // start every message shortened again.
+    useEffect(() => {
+      useExpandedMessageStore.getState().clearSurface('timeline');
+      clearExpandableTextCache();
+    }, [conversationId]);
+
     const { data: target } = useGetConversationTarget(conversationId);
     const isComposeDisabled = !!target && !target.isActive;
 

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -68,6 +68,7 @@ import { resolveImageDisplayDims } from '../../components/messages/imageMessage'
 import ChatImageDimens, {
   CHAT_IMAGE_VIEW_SOURCE,
 } from '../../utils/chatImageDimens';
+import { ChatTypingIndicator } from './ChatTypingIndicator';
 
 // Cluster spacing: a wide gap after the message that closes a cluster, a tight
 // one between messages inside it. These override the flat margin on the row
@@ -1020,6 +1021,7 @@ export const ChatListLegend = memo(
             {showBadge && <KContainer.View style={styles.badge} />}
           </KContainer.Touchable>
         </Animated.View>
+        <ChatTypingIndicator />
       </KContainer.View>
     );
   }

package/src/screens/chat-detail/ChatTypingIndicator.tsx

@@ -0,0 +1,89 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KColors, KContainer, KLabel, KSpacingValue } from '@droppii/libs';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
+import { TypingDots } from '../../components/TypingDots';
+import { useChatDetailContext } from '../../context/ChatDetailContext';
+import { useGroupMemberName } from '../../hooks/groups/useGroupMemberName';
+import { useInputState } from '../../hooks/useInputState';
+import { resolveTypingText } from '../../utils/inputState';
+import { trans } from '../../translation';
+
+/**
+ * "<name> đang nhập..." above the composer, with the bouncing dots.
+ *
+ * Renders nothing while nobody is typing — an empty row would reserve height
+ * and nudge the message list every time somebody started or stopped.
+ */
+export const ChatTypingIndicator = memo(() => {
+  const { conversation } = useChatDetailContext();
+  const isGroup = conversation?.peerType === PeerType.Group;
+
+  const { isTyping, typers } = useInputState(conversation?.conversationID);
+
+  // Only the first typer is ever named — past one person the copy collapses to
+  // "Nhiều người", so a single lookup covers every case.
+  const firstTyperId = typers[0]?.userID;
+  const memberName = useGroupMemberName(
+    isGroup ? conversation?.groupID : undefined,
+    isGroup ? firstTyperId : undefined
+  );
+
+  // A 1:1 or bot thread is named after its only other participant, so the
+  // conversation's own name is the answer and no lookup is needed.
+  // A key plus its values, not a finished string: the name renders bold while
+  // the rest does not, so RichText needs the pieces apart.
+  const copy = resolveTypingText(
+    typers.length,
+    isGroup ? memberName : conversation?.showName
+  );
+
+  if (!isTyping) return null;
+
+  // Dots go up the moment somebody types; the sentence follows once the name
+  // resolves. Waiting for the name would hold the whole indicator back on a
+  // network round-trip the dots do not depend on.
+  return (
+    <KContainer.View row style={styles.row}>
+      {!!copy && (
+        <KLabel.RichText
+          typo="TextXsNormal"
+          color={KColors.gray.light}
+          numberOfLines={1}
+          richTextOptions={{
+            i18nKey: trans(copy.key),
+            values: copy.values,
+            components: {
+              bold: (
+                <KLabel.Text typo="TextXsBold" color={KColors.gray.light} />
+              ),
+            },
+          }}
+        />
+      )}
+      <TypingDots
+        fill={KColors.gray.light}
+        width={13}
+        height={5.91}
+        style={styles.dot}
+      />
+    </KContainer.View>
+  );
+});
+
+ChatTypingIndicator.displayName = 'ChatTypingIndicator';
+
+const styles = StyleSheet.create({
+  row: {
+    paddingHorizontal: KSpacingValue['0.5rem'],
+    paddingVertical: 2,
+    gap: 2,
+    alignItems: 'flex-end',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+  },
+  dot: {
+    marginBottom: 3,
+  },
+});

package/src/screens/chat-detail/PinnedMessagesSheet.tsx

@@ -12,6 +12,7 @@ import {
 import { UIUtils } from '../../utils/UIUtils';
 import { trans } from '../../translation';
 import { usePinnedMessageStore } from '../../store/pinnedMessage';
+import { useExpandedMessageStore } from '../../store/expandedMessage';
 import { LegendChatMessage } from './legend/LegendChatMessage';
 import { formatMessageTime } from './legend/messageTypes';
 
@@ -122,6 +123,7 @@ const PinnedMessagesSheetContent = memo(
                 <LegendChatMessage
                   message={message}
                   messageId={messageId}
+                  surface="pin"
                   isOutgoing={isOutgoing}
                   createdAtTime={createdAtTime}
                   onPress={handlePressMessage}
@@ -198,6 +200,12 @@ export const openPinnedMessagesSheet = ({
   customMessageItemFactory,
   onPressMessage,
 }: OpenPinnedMessagesSheetParams) => {
+  // Reset on open, not on close. `UIUtils.bottomSheet` is an adapter the host
+  // app registers, so whether dismissing unmounts this content — or keeps it
+  // mounted and hidden — is not ours to know. Clearing here satisfies
+  // "reopened starts shortened" whatever the host does with the sheet.
+  useExpandedMessageStore.getState().clearSurface('pin');
+
   UIUtils.bottomSheet.open({
     header: {
       title: { text: trans('chat:pinned_messages_title') },

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -28,6 +28,7 @@ import QuotedMessage from '../../../components/messages/quotedMessage';
 import { StickerMessage } from '../../../components/messages/stickerMessage';
 import { GROUP_NOTIFICATION_TYPES } from '../../../utils/messageUtils';
 import type { GroupPosition } from '../../../utils/legendListMessage';
+import type { MessageSurface } from '../../../store/expandedMessage';
 import { Avatar } from '../../../components/Avatar';
 import { TAIL_WIDTH } from '../../../components/messages/BubbleTail';
 
@@ -72,6 +73,15 @@ interface LegendChatMessageProps {
   showSenderGutter?: boolean;
   /** Position within its same-sender cluster — drives the bubble tail. */
   groupPosition?: GroupPosition;
+  /**
+   * Which surface is rendering this message. Expansion state is scoped by it
+   * (BR-003), so Pin Management must pass `'pin'` explicitly — the default
+   * keeps the timeline and the toolbox overlay sharing one scope, which is
+   * what makes the overlay clone mirror the row it lifted from.
+   */
+  surface?: MessageSurface;
+  /** Toolbox overlay clone — see `BaseLegendMessageProps.isPreview`. */
+  isPreview?: boolean;
 }
 
 const messageComponentMap: Partial<
@@ -129,6 +139,8 @@ export const LegendChatMessage = memo(
     showAvatar = false,
     showSenderGutter = false,
     groupPosition,
+    surface = 'timeline',
+    isPreview,
   }: LegendChatMessageProps) => {
     const handlePress = useCallback(() => {
       onPress?.(messageId);
@@ -151,6 +163,8 @@ export const LegendChatMessage = memo(
         <KContainer.View center style={styles.systemMessageWrapper}>
           <SystemMessageComponent
             message={message}
+            messageId={messageId}
+            surface={surface}
             isOutgoing={isOutgoing}
             createdAtTime={createdAtTime}
           />
@@ -210,12 +224,18 @@ export const LegendChatMessage = memo(
               {message.senderNickname}
             </KLabel.Text>
           )}
+          {/* No gestures on the overlay clone: a Tap here would race
+              `Xem thêm` for the same touch, and the overlay has its own
+              tap-to-dismiss around the clone. */}
           <LongPressWrapper
-            onPress={shouldHandlePress ? handlePress : undefined}
-            onLongPress={handleLongPress}
+            onPress={shouldHandlePress && !isPreview ? handlePress : undefined}
+            onLongPress={isPreview ? undefined : handleLongPress}
           >
             <MessageComponent
               message={message}
+              messageId={messageId}
+              surface={surface}
+              isPreview={isPreview}
               isOutgoing={isOutgoing}
               createdAtTime={createdAtTime}
               onMediaPress={hasMediaPress ? effectiveOnMediaPress : undefined}