@droppii-org/chat-mobile 0.2.107 → 0.2.108

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

@@ -31,6 +31,7 @@ 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;
@@ -142,6 +143,7 @@ export const LegendChatMessage = memo(
     surface = 'timeline',
     isPreview,
   }: LegendChatMessageProps) => {
+    perfCountRender('LegendChatMessage');
     const handlePress = useCallback(() => {
       onPress?.(messageId);
     }, [onPress, messageId]);

package/src/screens/chat-detail/types.ts

@@ -107,3 +107,12 @@ export interface ChatDetailProps extends Omit<
   groupJoinSource?: GroupJoinSource;
   renderConversationViewHeader?: () => ReactNode;
 }
+
+/**
+ * @internal Imperative handle to the composer's attachment/sticker panel,
+ * used by ChatDetail for tap-outside dismiss. Not part of the public API.
+ */
+export interface ComposerPanelController {
+  isOpen: () => boolean;
+  close: () => void;
+}

package/src/store/message.ts

@@ -14,6 +14,7 @@ import type {
 import { mergeMessages } from '../utils/message';
 import { isMessageRevoked } from '../utils/messageUtils';
 import { useConversationStore } from './conversation';
+import { perfMark } from '../utils/perf-marker';
 
 // Smaller than a typical "load more" page size elsewhere in the app on
 // purpose: each page becomes a single prepend batch in ChatListLegend, and a
@@ -77,7 +78,16 @@ export const useMessageStore = create<MessageStore>()((set, get) => ({
         viewType: ViewType.History,
         applicationType: applicationType,
       };
+      perfMark('history_page_request', {
+        loadMore: !!loadMore,
+        loaded: get().messages.length,
+      });
       const res = await OpenIMSDK.getAdvancedHistoryMessageListApp(params);
+      perfMark('history_page_response', {
+        loadMore: !!loadMore,
+        received: res.messageList?.length ?? 0,
+        isEnd: !!res.isEnd,
+      });
       if (
         conversationId === useConversationStore.getState().currentConversationId
       ) {
@@ -89,6 +99,10 @@ export const useMessageStore = create<MessageStore>()((set, get) => ({
           initLoading: false,
           moreOldLoading: false,
         }));
+        perfMark('history_list_update', {
+          loadMore: !!loadMore,
+          total: get().messages.length,
+        });
       }
     } catch (error) {
       console.log('Failed to get more old messages', error);

package/src/utils/composerPanelDismissGesture.ts

@@ -0,0 +1,72 @@
+/**
+ * Per-touch state for dismissing the composer's attachment/sticker panel by
+ * tapping the chat timeline: a touch that began while the panel was open and
+ * ended without dragging is a dismiss tap. Drag detection is explicit — a
+ * movement threshold or the list's scroll-begin — since the touch is only
+ * observed (touch events), never claimed as the JS responder.
+ */
+export const DISMISS_DRAG_THRESHOLD_PX = 10;
+
+export interface DismissTouch {
+  panelOpenAtStart: boolean;
+  dragged: boolean;
+  startX: number;
+  startY: number;
+}
+
+export const IDLE_DISMISS_TOUCH: DismissTouch = {
+  panelOpenAtStart: false,
+  dragged: false,
+  startX: 0,
+  startY: 0,
+};
+
+export const startDismissTouch = (
+  panelOpen: boolean,
+  x: number,
+  y: number
+): DismissTouch => ({
+  panelOpenAtStart: panelOpen,
+  dragged: false,
+  startX: x,
+  startY: y,
+});
+
+export const moveDismissTouch = (
+  touch: DismissTouch,
+  x: number,
+  y: number
+): DismissTouch => {
+  if (touch.dragged) return touch;
+  const movedBeyondThreshold =
+    Math.abs(x - touch.startX) > DISMISS_DRAG_THRESHOLD_PX ||
+    Math.abs(y - touch.startY) > DISMISS_DRAG_THRESHOLD_PX;
+  return movedBeyondThreshold ? { ...touch, dragged: true } : touch;
+};
+
+export const markDismissTouchDragged = (touch: DismissTouch): DismissTouch =>
+  touch.dragged ? touch : { ...touch, dragged: true };
+
+/** Whether releasing this touch should close the panel. */
+export const shouldDismissOnRelease = (touch: DismissTouch): boolean =>
+  touch.panelOpenAtStart && !touch.dragged;
+
+/**
+ * How long after the finger lifts a press still belongs to the dismissing
+ * touch. RNGH Tap and JS onPress callbacks land right after touchEnd; a later
+ * press (e.g. a screen-reader activation, which sends no touch events) must
+ * not be swallowed by a stale flag.
+ */
+export const SWALLOW_AFTER_RELEASE_MS = 500;
+
+/**
+ * Whether a timeline press must be swallowed. `releasedAt` is null while the
+ * dismissing touch is still down.
+ */
+export const isPressSwallowed = (
+  swallow: boolean,
+  releasedAt: number | null,
+  now: number
+): boolean =>
+  swallow &&
+  (releasedAt === null || now - releasedAt < SWALLOW_AFTER_RELEASE_MS);

package/src/utils/perf-marker.ts

@@ -0,0 +1,39 @@
+/**
+ * Opt-in performance markers for the local perf framework (`performance/`).
+ *
+ * Internal, not exported from the package: only exampleLegacy (the perf harness) imports `enablePerfMarkers` directly.
+ * Disabled by default, so every call is a no-op in consumer apps. When enabled, markers are written as
+ * `[PERF] {"name":..,"t":<epoch ms>,...}` through console.log, which the perf runner reads from the device log.
+ * Durations are computed between markers on the device clock, so no host/device clock sync is needed.
+ */
+let enabled = false;
+const FLUSH_INTERVAL_MS = 500;
+let renderCounts: Record<string, number> = {};
+let flushTimer: ReturnType<typeof setTimeout> | null = null;
+
+export const enablePerfMarkers = (on = true) => {
+  enabled = on;
+};
+
+export const perfMark = (name: string, data?: Record<string, unknown>) => {
+  if (!enabled) return;
+  console.log(`[PERF] ${JSON.stringify({ name, t: Date.now(), ...data })}`);
+};
+
+const flushRenderCounts = () => {
+  flushTimer = null;
+  const counts = renderCounts;
+  renderCounts = {};
+  perfMark('render_counts', { counts });
+};
+
+/**
+ * Counts render-function invocations of `component`, including renders React later discards.
+ * Counts are batched and emitted as a delta every ~500 ms, so logging never happens per render.
+ */
+export const perfCountRender = (component: string) => {
+  if (!enabled) return;
+  renderCounts[component] = (renderCounts[component] ?? 0) + 1;
+  if (!flushTimer)
+    flushTimer = setTimeout(flushRenderCounts, FLUSH_INTERVAL_MS);
+};