@droppii-org/chat-mobile 0.2.106 → 0.2.108

package/src/screens/chat-detail/hooks/useComposerPanelDismiss.ts

@@ -0,0 +1,111 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import type { GestureResponderEvent, ViewProps } from 'react-native';
+
+import type { ComposerPanelController } from '../types';
+import {
+  IDLE_DISMISS_TOUCH,
+  isPressSwallowed,
+  markDismissTouchDragged,
+  moveDismissTouch,
+  shouldDismissOnRelease,
+  startDismissTouch,
+  type DismissTouch,
+} from '../../../utils/composerPanelDismissGesture';
+
+export type DismissAreaTouchProps = Pick<
+  ViewProps,
+  'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'onTouchCancel'
+>;
+
+// Tap-outside dismiss for the composer's attachment/sticker panel
+// (DROPPII-30577).
+//
+// While a panel is open the timeline's content is made non-hittable
+// (`isComposerPanelOpen` → `pointerEvents: 'none'` on the list content), so a
+// tap can never reach a bubble — JS touchables and RNGH gestures alike — yet
+// the scroll view itself still receives the touch and scrolls. Tap vs drag is
+// read from plain touch events on a View wrapping the list; they observe the
+// touch without claiming the JS responder, which on iOS would disable the
+// scroll view's pan (RCTScrollView disables it while an ancestor holds the
+// responder).
+//
+// `pointerEvents` only lands after a React round-trip (open → effect →
+// setState → list re-render), so a tap right after opening a heavy panel can
+// still reach a bubble. `shouldSwallowPress` closes that gap synchronously: it
+// is true for every press belonging to a touch that began with the panel
+// open — while it is down and for SWALLOW_AFTER_RELEASE_MS after it lifts,
+// since RNGH gesture callbacks arrive after touchEnd.
+export const useComposerPanelDismiss = () => {
+  const panelControllerRef = useRef<ComposerPanelController | null>(null);
+  const touchRef = useRef<DismissTouch>(IDLE_DISMISS_TOUCH);
+  const swallowPressRef = useRef(false);
+  // null while the tracked touch is down.
+  const releasedAtRef = useRef<number | null>(null);
+  const [isComposerPanelOpen, setIsComposerPanelOpen] = useState(false);
+
+  const dismissAreaTouchProps = useMemo<DismissAreaTouchProps>(
+    () => ({
+      onTouchStart: (event: GestureResponderEvent) => {
+        const panelOpen = !!panelControllerRef.current?.isOpen();
+        // A second finger must not restart the tracked touch, but a press it
+        // makes while the panel is open is still swallowed.
+        if (event.nativeEvent.touches.length > 1) {
+          if (panelOpen) swallowPressRef.current = true;
+          return;
+        }
+        touchRef.current = startDismissTouch(
+          panelOpen,
+          event.nativeEvent.pageX,
+          event.nativeEvent.pageY
+        );
+        swallowPressRef.current = panelOpen;
+        releasedAtRef.current = null;
+      },
+      onTouchMove: (event: GestureResponderEvent) => {
+        touchRef.current = moveDismissTouch(
+          touchRef.current,
+          event.nativeEvent.pageX,
+          event.nativeEvent.pageY
+        );
+      },
+      onTouchEnd: (event: GestureResponderEvent) => {
+        if (event.nativeEvent.touches.length > 0) return;
+        if (shouldDismissOnRelease(touchRef.current)) {
+          panelControllerRef.current?.close();
+        }
+        touchRef.current = IDLE_DISMISS_TOUCH;
+        releasedAtRef.current = Date.now();
+      },
+      // The scroll view took the touch over (pan began) — not a tap.
+      onTouchCancel: () => {
+        touchRef.current = IDLE_DISMISS_TOUCH;
+        releasedAtRef.current = Date.now();
+      },
+    }),
+    []
+  );
+
+  // The list's onScrollBeginDrag — a drag signal on both platforms.
+  const notifyScrollBeginDrag = useCallback(() => {
+    touchRef.current = markDismissTouchDragged(touchRef.current);
+  }, []);
+
+  const shouldSwallowPress = useCallback(
+    () =>
+      isPressSwallowed(
+        swallowPressRef.current,
+        releasedAtRef.current,
+        Date.now()
+      ),
+    []
+  );
+
+  return {
+    panelControllerRef,
+    isComposerPanelOpen,
+    onComposerPanelOpenChange: setIsComposerPanelOpen,
+    dismissAreaTouchProps,
+    notifyScrollBeginDrag,
+    shouldSwallowPress,
+  };
+};

package/src/screens/chat-detail/hooks/useComposerPanels.ts

@@ -0,0 +1,197 @@
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  type RefObject,
+} from 'react';
+import { Keyboard } from 'react-native';
+
+import { useChatComposerAnimation } from './useChatComposerAnimation';
+import type { ActivePanelType } from './useChatComposerState';
+import type { ComposerPanelController } from '../types';
+import { getAttachmentPanelHeight, DEFAULT_PANNEL_ACTIONS } from '../constants';
+import { STICKER_PICKER_HEIGHT } from '../../../components/StickerPicker/constants';
+
+// 'immediate' — no animation (sticker yielding to the keyboard);
+// 'fast' — half-duration (attachment yielding to the keyboard);
+// 'animated' — full duration, same as closing via the toggle icon.
+export type ClosePanelMode = 'immediate' | 'fast' | 'animated';
+
+interface UseComposerPanelsProps {
+  activePanelType: ActivePanelType;
+  setActivePanelType: (type: ActivePanelType) => void;
+  isAttachmentOpen: boolean;
+  setIsAttachmentOpen: (open: boolean) => void;
+  isMentionPanelOpen: boolean;
+  closeMentionPanel: () => void;
+  isKeyboardVisible: boolean;
+  // False while the accessory slot is unmounted or the input row is replaced
+  // by a status banner — a panel there is invisible and cannot be toggled.
+  isSlotVisible: boolean;
+  panelControllerRef?: RefObject<ComposerPanelController | null>;
+  // Effective open state (open AND visible), for the timeline's dismiss area.
+  onPanelOpenChange?: (open: boolean) => void;
+}
+
+export const useComposerPanels = ({
+  activePanelType,
+  setActivePanelType,
+  isAttachmentOpen,
+  setIsAttachmentOpen,
+  isMentionPanelOpen,
+  closeMentionPanel,
+  isKeyboardVisible,
+  isSlotVisible,
+  panelControllerRef,
+  onPanelOpenChange,
+}: UseComposerPanelsProps) => {
+  const attachmentPanelHeight = useMemo(
+    () => getAttachmentPanelHeight(DEFAULT_PANNEL_ACTIONS.length),
+    []
+  );
+
+  const panelHeight =
+    activePanelType === 'sticker'
+      ? STICKER_PICKER_HEIGHT
+      : attachmentPanelHeight;
+
+  // Mirrors isAttachmentOpen synchronously (written before React commits),
+  // so imperative readers — the timeline's tap-outside dismiss — never see
+  // a stale value between an open/close and the next render.
+  const isAttachmentOpenRef = useRef(false);
+  const handleAttachmentOpenChange = useCallback(
+    (open: boolean) => {
+      isAttachmentOpenRef.current = open;
+      setIsAttachmentOpen(open);
+    },
+    [setIsAttachmentOpen]
+  );
+
+  const { accessorySlotStyle, openWithHeight, closeAttachment } =
+    useChatComposerAnimation({
+      panelHeight,
+      onAttachmentOpenChange: handleAttachmentOpenChange,
+    });
+
+  const closeActivePanel = useCallback(
+    (mode: ClosePanelMode) => {
+      closeAttachment(mode === 'fast', mode === 'immediate');
+      setActivePanelType(null);
+    },
+    [closeAttachment, setActivePanelType]
+  );
+
+  // Close mode when yielding to the keyboard or the mention picker: the
+  // sticker panel closes immediately to avoid a layout conflict between the
+  // panel closing and the keyboard appearing; the attachment panel is small
+  // enough that animation is fine (speedUp=true).
+  const yieldingCloseMode: ClosePanelMode =
+    activePanelType === 'sticker' ? 'immediate' : 'fast';
+
+  // Mutual exclusion (finding #5 in the mention plan): the mention picker
+  // never renders through the attachment/sticker panel slot, but opening
+  // one must still close the other — starting a mention query while the
+  // attachment/sticker panel is open closes that panel.
+  useEffect(() => {
+    if (isMentionPanelOpen && isAttachmentOpen) {
+      closeActivePanel(yieldingCloseMode);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMentionPanelOpen]);
+
+  // A panel left open when the slot disappears (composer disabled, bot
+  // restarted, removed from group) would otherwise stay "open" invisibly.
+  const isSlotVisibleRef = useRef(isSlotVisible);
+  isSlotVisibleRef.current = isSlotVisible;
+  useEffect(() => {
+    if (!isSlotVisible && isAttachmentOpenRef.current) {
+      closeActivePanel('immediate');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSlotVisible]);
+
+  const isPanelEffectivelyOpen = isAttachmentOpen && isSlotVisible;
+  useEffect(() => {
+    onPanelOpenChange?.(isPanelEffectivelyOpen);
+  }, [isPanelEffectivelyOpen, onPanelOpenChange]);
+
+  useImperativeHandle(
+    panelControllerRef,
+    () => ({
+      isOpen: () => isAttachmentOpenRef.current && isSlotVisibleRef.current,
+      close: () => {
+        if (isAttachmentOpenRef.current) closeActivePanel('animated');
+      },
+    }),
+    [closeActivePanel]
+  );
+
+  const handleToggleAttachment = useCallback(() => {
+    closeMentionPanel();
+    if (activePanelType === 'sticker') {
+      // switch from sticker to attachment
+      setActivePanelType('attachment');
+      openWithHeight(attachmentPanelHeight);
+      return;
+    }
+    // Open/close decided on the same source of truth as the icon: a
+    // toggle keyed on the animated height could close a panel that is
+    // still collapsing from a tap-outside dismiss while the icon shows it
+    // opening.
+    if (isAttachmentOpenRef.current) {
+      closeActivePanel('animated');
+      return;
+    }
+    if (isKeyboardVisible) {
+      Keyboard.dismiss();
+    }
+    setActivePanelType('attachment');
+    openWithHeight(attachmentPanelHeight);
+    // Deliberately depend on `closeMentionPanel` (stable — [] deps in
+    // useMentionComposer), NOT the whole `mentionComposer` object, which is
+    // a fresh literal every render (useMentionComposer doesn't memoize its
+    // return value). Depending on the whole object recreated this callback
+    // — and therefore every prop built from it, e.g. ChatMessageInput's
+    // onEmojiPress — on every single render, which contributed to a real
+    // "Maximum update depth exceeded" loop found in testing.
+  }, [
+    activePanelType,
+    attachmentPanelHeight,
+    isKeyboardVisible,
+    openWithHeight,
+    closeActivePanel,
+    setActivePanelType,
+    closeMentionPanel,
+  ]);
+
+  const handleToggleSticker = useCallback(() => {
+    closeMentionPanel();
+    if (activePanelType === 'sticker') {
+      closeActivePanel('animated');
+      return;
+    }
+    if (isKeyboardVisible) {
+      Keyboard.dismiss();
+    }
+    setActivePanelType('sticker');
+    openWithHeight(STICKER_PICKER_HEIGHT);
+    // Same reasoning as handleToggleAttachment above — see that comment.
+  }, [
+    activePanelType,
+    isKeyboardVisible,
+    closeMentionPanel,
+    closeActivePanel,
+    openWithHeight,
+    setActivePanelType,
+  ]);
+
+  return {
+    accessorySlotStyle,
+    closeActivePanel,
+    yieldingCloseMode,
+    handleToggleAttachment,
+    handleToggleSticker,
+  };
+};

package/src/screens/chat-detail/hooks/useComposerSend.ts

@@ -0,0 +1,98 @@
+import { useCallback, type RefObject } from 'react';
+
+import { trans } from '../../../translation';
+import { UIUtils } from '../../../utils/UIUtils';
+import {
+  serializeMentionsForSend,
+  MAX_AT_USER_COUNT,
+} from '../../../utils/mentionSerializer';
+import type { useChatCompose } from '../../../hooks/useChatCompose';
+import type { useMentionComposer } from './useMentionComposer';
+
+type Mentions = ReturnType<typeof useMentionComposer>['mentions'];
+
+interface UseComposerSendProps {
+  compose: ReturnType<typeof useChatCompose>;
+  isSendMessageAllowed: boolean;
+  sendDeniedReason?: string;
+  mentions: Mentions;
+  clearMentions: () => void;
+  notifyStoppedTyping: () => void;
+  inputRef: RefObject<any>;
+}
+
+export const useComposerSend = ({
+  compose,
+  isSendMessageAllowed,
+  sendDeniedReason,
+  mentions,
+  clearMentions,
+  notifyStoppedTyping,
+  inputRef,
+}: UseComposerSendProps) =>
+  useCallback(async () => {
+    if (!isSendMessageAllowed) {
+      UIUtils.toast.open({
+        title: sendDeniedReason,
+        theme: 'info',
+      });
+      return;
+    }
+
+    if (compose.isUploading || !compose.canSend) return;
+    const mentionsToSend = mentions;
+
+    // OpenIM's Go core hard-rejects an AtTextMessage tagging more than
+    // MAX_AT_USER_COUNT users, so serializeMentionsForSend caps
+    // atUserIDList to the first MAX_AT_USER_COUNT (mentionSerializer.ts's
+    // doc comment) — the message still sends, with every mention still
+    // highlighted in the text, just only the first MAX_AT_USER_COUNT
+    // actually get natively tagged/notified. This is a heads-up, not a
+    // block, so no `return` here.
+    if (mentionsToSend.length > 0) {
+      const { truncated } = serializeMentionsForSend(mentionsToSend);
+      if (truncated) {
+        UIUtils.toast.open({
+          title: trans('group:tag_limit_exceeded', {
+            max: String(MAX_AT_USER_COUNT),
+          }),
+          theme: 'info',
+        });
+      }
+    }
+
+    // Clear mention state synchronously, in the same tick as
+    // compose.send() (which clears `text`) — otherwise there's a real
+    // transient render where `value` is already '' but `mentions` still
+    // holds the just-sent entries, and the composer can visibly fail to
+    // clear (ChatMessageInput stays in children-controlled mode with a
+    // "ghost" mention anchored past the end of an empty string). See
+    // useMentionComposer.clear()'s doc comment.
+    clearMentions();
+    // 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) {
+      if (__DEV__) console.error('[ChatComposer] Failed to send:', error);
+    } finally {
+      // Belt-and-suspenders: force the native view to actually clear,
+      // regardless of whether the value/children mode-switch (triggered
+      // by mentions going from non-empty to empty) synced correctly on
+      // its own — the underlying nested-Text-in-TextInput technique is
+      // known to have platform quirks around this kind of transition.
+      inputRef.current?.clear();
+    }
+    // Depend on mentionComposer.mentions/.clear specifically (both
+    // stable-per-value / [] deps), not the whole mentionComposer object —
+    // same reasoning as handleToggleAttachment in useComposerPanels.
+  }, [
+    compose,
+    isSendMessageAllowed,
+    sendDeniedReason,
+    mentions,
+    clearMentions,
+    notifyStoppedTyping,
+    inputRef,
+  ]);

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

@@ -28,8 +28,10 @@ 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';
+import { perfCountRender } from '../../../utils/perf-marker';
 
 type MessageProps = BaseLegendMessageProps & {
   onPressUrl?: (url: string) => void;
@@ -72,6 +74,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,7 +140,10 @@ export const LegendChatMessage = memo(
     showAvatar = false,
     showSenderGutter = false,
     groupPosition,
+    surface = 'timeline',
+    isPreview,
   }: LegendChatMessageProps) => {
+    perfCountRender('LegendChatMessage');
     const handlePress = useCallback(() => {
       onPress?.(messageId);
     }, [onPress, messageId]);
@@ -151,6 +165,8 @@ export const LegendChatMessage = memo(
         <KContainer.View center style={styles.systemMessageWrapper}>
           <SystemMessageComponent
             message={message}
+            messageId={messageId}
+            surface={surface}
             isOutgoing={isOutgoing}
             createdAtTime={createdAtTime}
           />
@@ -210,12 +226,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}

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}