@droppii-org/chat-mobile 0.2.107 → 0.2.108

package/lib/typescript/src/utils/composerPanelDismissGesture.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 declare const DISMISS_DRAG_THRESHOLD_PX = 10;
+export interface DismissTouch {
+    panelOpenAtStart: boolean;
+    dragged: boolean;
+    startX: number;
+    startY: number;
+}
+export declare const IDLE_DISMISS_TOUCH: DismissTouch;
+export declare const startDismissTouch: (panelOpen: boolean, x: number, y: number) => DismissTouch;
+export declare const moveDismissTouch: (touch: DismissTouch, x: number, y: number) => DismissTouch;
+export declare const markDismissTouchDragged: (touch: DismissTouch) => DismissTouch;
+/** Whether releasing this touch should close the panel. */
+export declare const shouldDismissOnRelease: (touch: DismissTouch) => boolean;
+/**
+ * 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 declare const SWALLOW_AFTER_RELEASE_MS = 500;
+/**
+ * Whether a timeline press must be swallowed. `releasedAt` is null while the
+ * dismissing touch is still down.
+ */
+export declare const isPressSwallowed: (swallow: boolean, releasedAt: number | null, now: number) => boolean;
+//# sourceMappingURL=composerPanelDismissGesture.d.ts.map

package/lib/typescript/src/utils/composerPanelDismissGesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composerPanelDismissGesture.d.ts","sourceRoot":"","sources":["../../../../src/utils/composerPanelDismissGesture.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,kBAAkB,EAAE,YAKhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,WAAW,OAAO,EAClB,GAAG,MAAM,EACT,GAAG,MAAM,KACR,YAKD,CAAC;AAEH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,YAAY,EACnB,GAAG,MAAM,EACT,GAAG,MAAM,KACR,YAMF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,OAAO,YAAY,KAAG,YACT,CAAC;AAEtD,2DAA2D;AAC3D,eAAO,MAAM,sBAAsB,GAAI,OAAO,YAAY,KAAG,OACnB,CAAC;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,OAAO,EAChB,YAAY,MAAM,GAAG,IAAI,EACzB,KAAK,MAAM,KACV,OAEmE,CAAC"}

package/lib/typescript/src/utils/perf-marker.d.ts

@@ -0,0 +1,8 @@
+export declare const enablePerfMarkers: (on?: boolean) => void;
+export declare const perfMark: (name: string, data?: Record<string, unknown>) => void;
+/**
+ * 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 declare const perfCountRender: (component: string) => void;
+//# sourceMappingURL=perf-marker.d.ts.map

package/lib/typescript/src/utils/perf-marker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf-marker.d.ts","sourceRoot":"","sources":["../../../../src/utils/perf-marker.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,iBAAiB,GAAI,YAAS,SAE1C,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,SAGpE,CAAC;AASF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,WAAW,MAAM,SAKhD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-mobile",
-  "version": "0.2.107",
+  "version": "0.2.108",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",
@@ -63,6 +63,7 @@
     "typecheck": "tsc -p tsconfig.build.json 2>&1 | grep -E 'src/.*error' || echo 'Typecheck passed (external dependency warnings ignored)'",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "test": "jest",
+    "perf": "node performance/scripts/cli.mjs",
     "release": "release-it --no-git --ci --no-increment",
     "web": "vite",
     "build:web": "vite build",

package/src/components/ThreadCard/ThreadCard.tsx

@@ -25,6 +25,7 @@ import { MuteThread } from './MuteThread';
 import { PinThread } from './PinThread';
 import { useIsJoinedGroup } from '../../hooks/useIsJoinedGroup';
 import isEmpty from 'lodash/isEmpty';
+import { perfCountRender } from '../../utils/perf-marker';
 
 interface ThreadCardProps {
   item: string;
@@ -35,6 +36,7 @@ interface ThreadCardProps {
 }
 
 const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
+  perfCountRender('ThreadCard');
   const conversation = useConversation(item);
 
   const {

package/src/components/messages/fileMessage/index.tsx

@@ -7,6 +7,9 @@ import { getTailCornerStyle } from '../bubbleTail.utils';
 import { BubbleTailRow } from '../BubbleTailRow';
 import type { BaseLegendMessageProps } from '../types';
 import { useFileDownload } from '../../../hooks/useFileDownload';
+import { useGuardedPress } from '../../../hooks/useGuardedPress';
+import { useDismissKeyboardFirst } from '../../../hooks/useDismissKeyboardFirst';
+import { useTimelinePressGuard } from '../../../context/TimelinePressGuardContext';
 import {
   getFileIcon,
   getMimeType,
@@ -22,9 +25,20 @@ export const FileMessage = memo(
       (message.fileElem as any)?.url ||
       '';
 
-    const { state, handleView, handleDownload } = useFileDownload(
-      fileName,
-      url
+    const {
+      state,
+      handleView: handleViewRaw,
+      handleDownload: handleDownloadRaw,
+    } = useFileDownload(fileName, url);
+    // Skipped for the tap that dismisses a composer panel (timeline only).
+    const shouldSwallowPress = useTimelinePressGuard();
+    const handleView = useGuardedPress(
+      useDismissKeyboardFirst(handleViewRaw),
+      shouldSwallowPress
+    );
+    const handleDownload = useGuardedPress(
+      handleDownloadRaw,
+      shouldSwallowPress
     );
 
     const mimeType = useMemo(() => getMimeType(fileName), [fileName]);

package/src/components/messages/quotedMessage/index.tsx

@@ -25,6 +25,7 @@ import { renderLinkifiedText } from '../LinkifiedText';
 import { ExpandableMessageText } from '../ExpandableMessageText';
 import { useUserStore } from '../../../store';
 import { useChatDetailContext } from '../../../context';
+import { useTimelinePressGuard } from '../../../context/TimelinePressGuardContext';
 import { ChatEvent } from '../../../types/events';
 
 interface QuotedMessageProps extends BaseLegendMessageProps {
@@ -85,11 +86,14 @@ const QuotedMessage = memo((props: QuotedMessageProps) => {
     return getFileIcon(mimeType);
   }, [quotedMessage]);
 
+  // Skipped for the tap that dismisses a composer panel (timeline only).
+  const shouldSwallowPress = useTimelinePressGuard();
   const handlePressQuotedMessage = useCallback(() => {
+    if (shouldSwallowPress()) return;
     DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
       clientMessageId: quotedMessage?.clientMsgID || '',
     });
-  }, [quotedMessage]);
+  }, [quotedMessage, shouldSwallowPress]);
 
   return (
     <>

package/src/context/TimelinePressGuardContext.tsx

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+const neverSwallow = () => false;
+
+/**
+ * Timeline-only press guard. ChatListLegend provides the tap-outside panel
+ * dismiss's `shouldSwallowPress` (useComposerPanelDismiss); every other
+ * surface (Pin Management, toolbox overlay) gets the no-op default.
+ */
+const TimelinePressGuardContext = createContext<() => boolean>(neverSwallow);
+
+export const TimelinePressGuardProvider = TimelinePressGuardContext.Provider;
+
+export const useTimelinePressGuard = () =>
+  useContext(TimelinePressGuardContext);

package/src/hooks/useConversationList.ts

@@ -4,6 +4,7 @@ import OpenIMSDK from '@droppii/openim-rn-client-sdk';
 import { conversationQueryKeys } from './query-keys';
 import { useConversationStore } from '../store';
 import type { DChatApplicationType } from '../types/chat';
+import { perfMark } from '../utils/perf-marker';
 
 type Params = {
   applicationType: DChatApplicationType;
@@ -33,6 +34,7 @@ export function useConversationList({
       });
 
       useConversationStore.getState().updateConversations(conversations);
+      perfMark('conversation_list_loaded', { count: conversations.length });
       return conversations;
     },
   });

package/src/hooks/useDismissKeyboardFirst.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { Keyboard } from 'react-native';
+
+/**
+ * Wraps a press that leaves the timeline (media viewer, link, file viewer) so
+ * the keyboard is dismissed first. The timeline uses
+ * `keyboardShouldPersistTaps="handled"`, so the keyboard would otherwise stay
+ * up over the screen the press opens. An absent handler stays absent.
+ */
+export const useDismissKeyboardFirst = <A extends unknown[]>(
+  handler: ((...args: A) => unknown) | undefined
+): ((...args: A) => void) | undefined =>
+  useMemo(() => {
+    if (!handler) return handler;
+    return (...args: A) => {
+      Keyboard.dismiss();
+      handler(...args);
+    };
+  }, [handler]);

package/src/hooks/useExpandableText.ts

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useWindowDimensions, type TextLayoutEvent } from 'react-native';
 import { useExpandedMessageStore } from '../store/expandedMessage';
+import { useTimelinePressGuard } from '../context/TimelinePressGuardContext';
 import {
   COLLAPSED_LINES,
   expandedKey,
@@ -125,9 +126,12 @@ export function useExpandableText(
     [fit, key, settle]
   );
 
+  // Skipped for the tap that dismisses a composer panel (timeline only).
+  const shouldSwallowPress = useTimelinePressGuard();
   const expand = useCallback(() => {
+    if (shouldSwallowPress()) return;
     expandInStore(surface, messageId);
-  }, [expandInStore, surface, messageId]);
+  }, [expandInStore, surface, messageId, shouldSwallowPress]);
 
   return {
     mode,

package/src/hooks/useGuardedPress.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+
+/**
+ * Wraps a timeline press handler so it is skipped while `shouldSwallow()` is
+ * true — the tap-outside panel dismiss (useComposerPanelDismiss) swallows the
+ * press of a touch that began with a composer panel open. An absent handler
+ * stays absent, so "not tappable" rows keep behaving as before. The wrapper's
+ * return value is dropped: press handlers are fire-and-forget.
+ */
+export const useGuardedPress = <A extends unknown[]>(
+  handler: ((...args: A) => unknown) | undefined,
+  shouldSwallow: (() => boolean) | undefined
+): ((...args: A) => void) | undefined =>
+  useMemo(() => {
+    if (!handler || !shouldSwallow) return handler;
+    return (...args: A) => {
+      if (shouldSwallow()) return;
+      handler(...args);
+    };
+  }, [handler, shouldSwallow]);